css实现图⽚和⽂字⽔平居中对齐
⽅式⼀、vertical-align:middle
通过vertical-align:middle实现现图⽚与⽂字⽔平对齐，需要区分html是⾏内元素，还是块状元素；例如：标签img、span是⾏内元素；标签p是块状元素则需要将标签p通过diaplay:inline-block；转化为⾏内元素；
CSS vertical-align 属性
定义和⽤法
vertical-align 属性设置元素的垂直对齐⽅式。
说明
该属性定义⾏内元素的基线相对于该元素所在⾏的基线的垂直对齐。允许指定负长度值和百分⽐值。这会使元素降低⽽不是升⾼。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐⽅式。
css设置文字垂直居中浏览器⽀持
所有浏览器都⽀持 vertical-align 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不⽀持属性值 “inherit”。
值描述
baseline默认。元素放置在⽗元素的基线上。
sub垂直对齐⽂本的下标。
super垂直对齐⽂本的上标
top把元素的顶端与⾏中最⾼元素的顶端对齐
text-top把元素的顶端与⽗元素字体的顶端对齐
middle把此元素放置在⽗元素的中部。
bottom把元素的顶端与⾏中最低的元素的顶端对齐。
text-bottom把元素的底端与⽗元素字体的底端对齐。
length
%使⽤ “line-height” 属性的百分⽐值来排列此元素。允许使⽤
%使⽤ “line-height” 属性的百分⽐值来排列此元素。允许使⽤
值描述
inherit规定应该从⽗元素继承 vertical-align 属性的值。
⽅式⼆、通过flex布局实现图⽚与⽂字⽔平对齐
只需要在⽗级元素中css添加：
display:flex;
flex-direction:row;
align-items:center;
⼦级元素则不需要像上⾯那样添加vertical-align：middle；
区别
vertical-align:middle 与flex布局处理图⽚与⽂字⽔平居中对齐的区别；前者只要针对标签⽐较少的，及css的内⽤是写在⼦级的；后者针对需要实现很多标签⽔平居中对齐⽐较⽅便，及css主要写在⽗级上；

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。