本文主要是介绍html并排图片和文字不对齐问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
问题:
今天在编写前端时遇到了这样一个问题,在一个li中添加一个img和一个不带标签的文字,但图片和文字对不齐
解决方法:
通过添加vertical-align属性来解决,属性值为text-bottom(vertical-align: text-bottom;),意思是将img的底部与父元素字体的底端对齐。
vertical-align
含义:属性设置一个元素的垂直对齐方式
使用说明:该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式
属性值:
baseline 默认。元素放置在父元素的基线上。
sub:垂直对齐文本的下标
super:垂直对齐文本的上标
top:text-top:把元素的顶端与父元素字体的顶端对齐
middle:把此元素放置在父元素的中部
bottom:使元素及其后代元素的底部与整行的底部对齐
text-bottom:把元素的底部与父元素字体的底端对齐
length:将元素 升高或降低指定的高度,可以是负数
%:使用“line-height”属性的百分比值来排列此元素。允许使用负值
inherit:规定应该从父元素继承vertical-align属性的值
这篇关于html并排图片和文字不对齐问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!