【HTML+CSS】元素垂直对齐-vertical-algin

参会人：@提及
会议时间：2022-01-20
会议地点：3 号会议室

文本对齐vertical-algin

vertical-algin: 元素垂直对齐的方式

• top顶部对齐
• bottom底部对齐
• middle中心对齐
• baseline基线对齐 默认

**小结: **首先这个属性只能给行内元素或者行内块元素设置,其次改元素属性不针对自己,而是针对其在一行的内联元素与自己的对齐方式

img的默认对齐值是基线对齐

<style>
        div img{
            width: 100px;
            height: 100px;
            vertical-align: middle;
        }
</style>
    <div>
        <img src="./task1.jpg" alt="">
        <span>幔帐中的的林黛玉</span>
    </div>

左右图片之间的间距

解决方法:

1. img标签连写(不换行)
2. 在不影响布局的情况下, 写浮动

<style>
        div{
            border: 1px solid red;
            overflow: hidden;
        }
         img{
            width: 100px;
            height: 100px;
            /* vertical-align: middle; */
            border: 1px solid black;
            float: left;
        }
</style>
<div>
        <img src="./img/task1.jpg" alt="">
        <img src="./img/task1.jpg" alt="">
</div>

去掉图片下方的3-5px的间隙

原因: 图片是一个行内块元素, 具有基线对齐的效果
思路:

1. 图片转为其他类型的元素
2. 改变基线对齐的效果
3. 去掉基线和底线之间的间距

解决:

• 图片转为块元素display: block;(推荐)
• 给图片设置vertical-align: middle/top/bottom;(推荐)
• 给父元素设置font-size: 0;(去掉基线和底线之间的间距)(很少使用)
• 给父元素设置line-height: 0;(去掉基线和底线之间的间距)(很少使用)