怎么用div+css把图片中的图标和文字对齐

Posted 2023-04-19

如果是图片的话,在图片标签里写上<img src="图片路径" style="vertical-align:middle" />就可以 了

vertical-align版本：CSS1/CSS2 兼容性：IE4+ NS4+ 继承性：无
语法：
vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
取值：
auto : CSS1 根据 layout-flow 属性的值对齐对象内容
baseline : CSS1 默认值。将支持 valign 特性的对象的内容与基线对齐
sub : CSS1 垂直对齐文本的下标
super : CSS1 垂直对齐文本的上标
top : CSS1 将支持 valign 特性的对象的内容对象顶端对齐
text-top : CSS1 将支持 valign 特性的对象的文本与对象顶端对齐
middle : CSS1 将支持 valign 特性的对象的内容与对象中部对齐
bottom : CSS1 将支持 valign 特性的对象的内容与对象底端对齐
text-bottom : CSS1 将支持 valign 特性的对象的文本与对象顶端对齐
length : CSS2 由浮点数字和单位标识符组成的长度值 | 百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0，对于百分数来说就是0%。请参阅 长度单位 。目前IE尚未实现此参数

说明：
设置或检索对象内容的垂直对其方式。
对于 currentStyle 对象而言此属性的默认值为 auto 。对于其他对象而言是 baseline 。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 verticalAlign 。 参考技术A 部分代码能发上来么？

如果你的图片是用<img>标签引入的，那么你可以给<img>标签添加css样式

img
vertical-align:text-bottom;


这样的话，就会把图片元素的底端与父元素字体的底端对齐。

你把代码copy上来，这样会更便于别人帮助你解决问题的，我的个人建议。

p.s 楼上的回复比我快了一点~~~~ 参考技术B 你把字的行距改一下，line-height=整行的高度。小图标用
background:url(**.jpg) no-repeat left top; left和top分别表示小图标距离左和上的距离。根据实际情况进行调整 参考技术C li里添加上填充，DIV只能通过填充或边距顶下去本回答被提问者采纳 参考技术D css中
background:url(**.jpg) no-repeat left top;
其中left和top可以换成具体的值，
如background:url(**.jpg) no-repeat 8px 4px;

文字图片居中

http://www.zhangxinxu.com/wordpress/?p=61

 

② 多行文字
如何实现父容器高度固定，文字可能一行，两行或更多行的垂直居中对齐呢？
实现的关键是把文字当图片处理。用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中即可。
核心css代码如下，
外部div标签：

div{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}

内部span标签：

span{display:inline-block; font-size:0.1em; vertical-align:middle;}

下面这张是实例演示页面的效果截图：

行数不固定文字垂直居中对齐

有几点简要说明：
1.此例子用em做单位，如果您对em单位了解不够，把握不来的话，可以使用px做单位，值要换；
2.外部div不能使用浮动；
3.外部div高度和文字大小比例1.14为宜；
4.内部标签的vertical-align:middle可以省略，但是外部div高度和文字大小比例要修改，我自己试了一下，高度比字体1.5左右的样子；
5.系统原因，我没能够在IE8下测试。