html中文字怎么显示到图片的中正中间

方案一：文字浮动定位到图片上

<div class="img_wd">

   <div class="c_img"><img src="test.jpg" width="100px" height="100px"/></div>

   <div class="c_words">测试文字</div>

</div>

<style>

.c_img{position:relative}

.c_words{position:absolutetop:35pxheight:30pxline-height:30px}

</style>

如要文字居中显示：top值=(图片高度-文本div高度)/2

如需要求水平居中：left=(图片宽度-文本div宽度)/2

方案二：用图片做文字图层背景

<div class="img_wd">测试文字</div>

<style>

.img_wd{

background:url(test.jpg) top center no-repeat

width:100pxheight:100pxline-heiht:100px

text-align:center}

</style>

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html，填充问题基础代码。

2、在index.html中的<span>标签中，输入样式代码：style="float: leftpadding-top: 25px"。

3、浏览器运行index.html页面，此时文字对准了图片的中间。

1、首先先进行文本框的插入，在word文档编辑界面上，单击上方工具栏中的“插入”按钮，包括文本框，所有的插入选项都在这里。

2、在“插入”选项的下拉工具栏中，选择如图所示“文本框”图标单击。

3、接下来会d出文本框样式的选择框，在里面可以根据需要选择文本框样式。这里以简单文本框为例，单击选择框中的”简单文本框“。

4、在文档编辑区出现的如图所示文本框中，将原有的选择文字删去就可以编辑文字了。

5、编辑好文字后，选中刚才编辑的文字。接下来进行的是对于文字居中了。

6、单击上方工具栏中的“开始”选项，会出现下拉工具栏。关于文本的设置就在这里。

7、在“开始”选项的下拉工具栏中，“段落”设置中的“居中”设置。

8、至此设置完毕，可看到文本框中选中的文字已经在文本框中央，单击任意空白处取消选中即可。

9、完成效果如下。

---