CSS3 之 vertical-align 垂直对齐

垂直对齐

vertical-align 垂直对齐只针对：行内元素、行内块元素

语法

vertical-align: baseline;

实现 图片、表单 和 文字 对齐效果

<div class="box">
    <img src="./img/icon.png" style="vertical-align: top;"> 大数据男孩
</div>
<div class="box">
    <img src="./img/icon.png" style="vertical-align: middle;"> 大数据男孩
</div>
<div class="box">
    <img src="./img/icon.png" style="vertical-align: baseline;"> 大数据男孩
</div>
<div class="box">
    <img src="./img/icon.png" style="vertical-align: bottom;"> 大数据男孩
</div>

去除图片底部空白缝隙

方式一

只要不是于基线对齐（baseline），就能去掉空隙。

<style type="text/css">
    .box {
        border: #00FFFF 1px solid;
    }
</style>
<div class="box">
    <img src="img/icon.png" alt="">
</div>
<div class="box">
    <img src="img/icon.png" alt="" style="vertical-align: middle;">
</div>

方式二

把 <img>转为块元素也可以实现。

<style type="text/css">
    .box {
        border: #00FFFF 1px solid;
    }
</style>
<div class="box">
    <img src="img/icon.png" alt="" style="display: block;">
</div>