Home > Article > Web Front-end > 垂直居中--父元素高度确定的单行文本、父元素高度确定的多行文本_html/css_WEB-ITnose
垂直居中--父元素高度确定的单行文本、父元素高度确定的多行文本_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:38:411152browse
声明：来自http://www.imooc.com/learn/9 学习
父元素高度确定的单行文本的竖直居中
是通过设置父元素的 height 和 line-height 高度一致来实现的。
.container{ height:100px; line-height:100px; background:#999;} 父元素高度确定的多行文本
使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
<body><table><tbody><tr><td class="wrap"><div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p></div></td></tr></tbody></table></body>
table td{height:500px;background:#ccc} 在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。
<div class="container"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div></div><style>.container{ height:300px; background:#ccc; display:table-cell;/*IE8以上及Chrome、Firefox*/ vertical-align:middle;/*IE8以上及Chrome、Firefox*/}</style>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：使用checkbox实现纯CSS下拉框_html/css_WEB-ITnoseNext article：如何让超出范围的文本自动显示为省略号(CSS)_html/css_WEB-ITnose