divspanimg对齐，垂直居中对齐问题
我想你们在前端开发中或多或少都遇到过这种问题，⽂字和图⽚不能平齐，很是头疼。
HTML代码：
<div class="">⼩太阳<span>⼩太阳</span><img src="img/考拉.jpeg" alt=""></div>
介绍⼀个css属性：vertical-align
默认值是baseline。
当我们给 span 和 img 都加上 vertical-align: middle ; 会怎样尼？
<div class="" >⼩太阳<span >⼩太阳</span><img src="img/考拉.jpeg" alt=""></div>
发现第⼀个“⼩太阳”没对齐，当然是给 div 也加上vertical-align: middle;
其属性值及解析如下：
baseline：将⽀持valign特性的对象的内容与基线对齐
sub：垂直对齐⽂本的下标
super：垂直对齐⽂本的上标
div中的div居中top：将⽀持valign特性的对象的内容与对象顶端对齐
text-top：将⽀持valign特性的对象的⽂本与对象顶端对齐
middle：将⽀持valign特性的对象的内容与对象中部对齐
bottom：将⽀持valign特性的对象的⽂本与对象底端对齐
text-bottom：将⽀持valign特性的对象的⽂本与对象底端对齐
给div 设置⾏⾼line-height属性
line-height值改得和DIV或者SPAN的height相同！

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