目录
vertical-align
元素之间垂直方向对齐属性。下面以inline-block元素和inline元素为例：
当文字与带有inline-block属性的元素连接时，会以底对齐的形式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
height: 100px;
width: 100px;
background-color: red;
display: inline-block;
}
</style>
</head>
<body>
<div></div>abc
</body>
</html>显示结果：
当div中添加文字时它会以，div中的文字底对齐，如图显示结果
vertical-align属性则是基于当前对齐的底，可以设置为像素值，为正则后面的abc往下跑，为负则往上跑。还可以设置为关键字top、middle、bottom、text-bottom、text-top。
注意点
1.top、bottom都是基于前面一个元素的整体（红色方块）顶部或底部对齐，而middle、text-bottom、text-top是后面abc的中线、底部、顶部与前面abc文字底部对齐。
2.inline-block元素之间的对齐也是同样，但要注意元素里有文字时采取文字和元素的对齐方式即上面例子。
3.该属性还可以作用于table-cell元素，见下面链接第7点。display: table-cell知识点总结 - 简书
text-align
文字左右方向的对齐属性。只能取关键字：left、right、center，分别表示文字在元素中左对齐，右对齐和居中（补充垂直方向居中用line-height等于height）。
1273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
