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

Question

如题所述

Answer 1

方案一：文字浮动定位到图片上
<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:absolute;top:35px;height:30px;line-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:100px;height:100px;line-heiht:100px;
text-align:center;}
</style>

Answer 2

你好 首先可以使用图片做div背景 然后在你这个div中把文字居中 也可以把文字写在一个div中 position:absolute 绝对定位 设置相应的top 和lwft 谢谢本回答被网友采纳

Answer 3

将图片作为背景图，然后再背景图上加文字设置width,text-aline:center;

Answer 4

div加一个宽高，然后用定位 left：50%；top：50%； margin：负的宽、高度的一半。试一试

Answer 5

定位，边距，填充都能实现。具体看你做什么类型的