实现img 图片与文字对齐，图标与标题对齐

Posted 2023-03-30

参考技术A html：

css ：

这里图标的大小 font-size和文字一样的话就是对齐的，但是图标太小，调大 font-size之后就对不齐了。所以float 脱离文档流，设置高度和行高和文字一样即可。

前端文字与图片的对齐

实例如：

<p>

测试文字<img src="XXX" />

</p>

 

这时我们想要排版时，总会遇见图片与文字的对齐问题

这时其实只要将img加上vertical-align这个CSS样式即可。如

img

{

vertical-align:text-top;

}

从W3C上查到的可能的值有

 

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。