垂直对齐

垂直对齐

  使用vertical-align来设置垂直对齐，为了观看垂直对齐的效果，我们来看一下下面的例子

<div>
    <img src="img/3.jpg">
    我是一行文字
</div>

div {
    border-bottom: 1px solid red;
}

  我们知道文字由四条线组成

  而vertical-align就是设置这四条线的对齐方式的。现在我们设置图片其他三种对齐方式，默认是baseline对齐，就是基线对齐。

vertical-align: top;

  图片与文字的顶线对齐，所以这时图片与边框没有空隙。

vertical-align: middle;

  中线对齐，并且这时图片与边框也没有空隙。

vertical-align: bottom;

  底线对齐，同样没有空隙。

  垂直对齐一般是用来设置图片或者表单与文字的对齐方式的，如果不想图片与边框有空隙，只要不是设置baseline对齐都可以。