垂直对齐属性

1. 属性：vertical-align
2. 属性值
   • baseline 基线对齐，默认值
   • top/bottom/middle

3. 需求：用基线实现图片居中（了解即可，不实用）

   
   
   图片居中.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结构在容器中居中显示

1. 在父级元素上设置text-align:center可以让图片在水平方向居中显示

2. 在img图片后面添加一个任意标签，和图片之间不要有换行空格

3. 给辅助线设置代码：display:inline-block;width:0;height:100%;

4. 给图片和辅助线设置基线对齐：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