07-CSS垂直对齐属性

垂直对齐属性（案例1：基线实现img图片居中对齐）

1. 属性：vertical-align
2. 属性值
   • baseline 基线对齐，默认值
   • top/bottom/middle
3. 需求：用基线实现图片居中（了解即可，不实用）

案例1：实现img图片居中对齐

需求：实现图片在盒子中的垂直对齐排列

知识点：添加参照物（span,width=0）实现，vertical-align:middle;

<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

案例2：京东页面的多商品展示布局

案例3：图片的默认bug

案例4：背景定位导航栏