垂直对齐属性
- 属性：vertical-align
- 属性值
- baseline 基线对齐，默认值
- top/bottom/middle
-
需求：用基线实现图片居中（了解即可，不实用）
图片居中.png
<div>
<img src="images/logo1.png" alt=""><span></span>
</div>
div{
width: 300px;
height: 300px;
border: 1px solid #000;
margin: 100px auto;
text-align: center;
}
img,span{
vertical-align: middle;
}
span{
display: inline-block;
width: 0;
height: 100%;
}
总结：设置img结构在容器中居中显示
在父级元素上设置text-align:center可以让图片在水平方向居中显示
在img图片后面添加一个任意标签，和图片之间不要有换行空格
给辅助线设置代码：display:inline-block;width:0;height:100%;
给图片和辅助线设置基线对齐：vertical-align:middle
案例1：实现img图片居中对齐
https://www.jianshu.com/p/eb5529ce9135
案例2：京东页面的多商品展示布局
https://www.jianshu.com/p/9cd9e62cc285
案例3：图片的默认bug
https://www.jianshu.com/p/e573e57eacd7
