最新消息:文章中包含代码时,请遵守代码高亮规范!

解决vertical-align垂直居中无效bug【原创】

HTML+CSS Cindy 196浏览 0评论

在写页面布局的时候,有时候需要元素垂直居中显示,直接设置vertical-align: middle;会没有效果。加上display: table-cell;属性,让元素作为一个表格单元格显示(类似 <td> 和 <th>),就可以垂直居中显示,但是只能兼容到ie8,代码如下:

.box{

display: table-cell;

width:100px;

height:100px;

text-align: center;

vertical-align: middle;

border:1px solid red;

}

注:vertical-align针对的是行内元素,对块级元素不起作用。

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/22471.html

您必须 登录 才能发表评论!