网页中的内容不总是填满它所在的矩形区域，因此，控制内容的对齐通常很有帮助。即使矩形区域内的文本有很多行，仍可使用对齐，因为你可能希望文本左、右或居中对齐。有两个样式属性可用于控制网页内容的对齐：text-align和vertical-align。下面小编为大家介绍一下两者的区别。

1、text-align（水平对齐）

text-align样式使元素在其定界区域内水平对齐，其取值可以是left、right、center或justify。justify使元素两端对齐。

2、vertical-align（垂直对齐）

vertical-align属性与text-align属性类似，只是用于使元素在垂直对齐。vertical-align属性指定元素如何与其父元素（在有些情况下，是与网页中元素的当前行）对齐。“当前行”指的

是显示在元素内的元素所处的垂直位置，换句话说，是内联元素。如果几个内联元素显示在同一行，可将其垂直对齐方式设置为相同，使它们垂直对齐。

下面是vertical-align属性的可能取值。

top:将元素的顶部与当前行对齐。

middle:将元素的中心与当前行对齐。

bottom:将元素的底部与当前行对齐。

text-top：将元素的顶部与父元素的顶部对齐。

baseline：将元素的基线与父元素的基线行对齐。

text-bottom：将元素的底部与父元素的底部对齐。

写在最后：

如果想使一个内容水平居中就使用text-align:align，反之如果是垂直居中使用text-align + vertical-align。