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

发布网友

我来回答

5个回答

热心网友

方案一:文字浮动定位到图片上
<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>

热心网友

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

热心网友

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

热心网友

div加一个宽高,然后用定位 left:50%;top:50%; margin:负的宽、高度的一半。试一试

热心网友

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

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com