text-align和vertical-align

1.text-align（水平对齐）
text-align样式使元素在其定界区域内水平对齐，其取值可以是left、right、center或justify。justify使元素两端对齐。
2.vertical-align（垂直对齐）
（1）vertical-align基本属性
baseline：将支持valign特性的对象的内容与基线对齐
sub：垂直对齐文本的下标
super：垂直对齐文本的上标
top：将支持valign特性的对象的内容与对象顶端对齐
text-top：将支持valign特性的对象的文本与对象顶端对齐
middle：将支持valign特性的对象的内容与对象中部对齐
bottom：将支持valign特性的对象的文本与对象底端对齐
text-bottom：将支持valign特性的对象的文本与对象底端对齐
inherit：规定应该从父元素继承 vertical-align 属性的值(任何版本的IE（包括 IE8）都不支持属性值 "inherit")
注：常用的有top、middle、bottom，其他的不是很常用。所有浏览器都支持该属性。
一般用于图片和表格的对齐
（2）vertical-align属性不起作用？
只有一个元素属于inline或是inline-block，其身上的vertical-align属性才会起作用（即span内联元素、img内联块状元素等元素可以起作用，而div为块状元素block则不可以）
对vertical-align想要有更多的了解可参考：
http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

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

转载于:https://www.cnblogs.com/Begin-Vic/p/6407533.html