CSS实现元素垂直居中_html/css_WEB-ITnose
对元素的垂直居中针对于单行元素和多行元素将分情况讨论。
一、父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
HTML结构:
Hello World!!!
CSS样式:
二、父元素高度不确定的多行文本
对于父元素高度不确定的文本、图片等的块级元素的竖直居中可以设置相同的上下内边距(padding值)即可实现居中,这个数值不必过大。
三、父元素高度确定的多行文本
多行文本,图片,块级元素皆属于这种情况,对此的垂直居中主要有两种方法。
1.插入 table
对要垂直居中的元素外插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。
另需注意,css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效。
HTML结构:
Hello World!!! Hello World!!! Hello World!!! Hello World!!! Hello World!!! |
CSS样式:
table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。
2.设置块级元素的 display 为 table-cell
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式。
HTML结构:
Hello World!!!
Hello World!!!
Hello World!!!
Hello World!!!
Hello World!!!
CSS样式:
这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7。
上一篇: python实现的简单抽奖系统实例