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。
posted @ 2017-02-16 20:50  MR_Begin  阅读(921)  评论(0编辑  收藏  举报