马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>vertical-align</title>
<style>
.example{
border:1px solid;
text-align: center;
height:100px;
}
.element{
border:1px solid;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="example">
<div class="element">元素</div>
</div>
</body>
</html>
1、垂直居中是有适用范围的。
若元素是单行文本, 则可设置 line-height 等于父元素高度
若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央
可用 vertical-align 属性, 而 vertical-align 只有在父层为 td 或者 th 时, 才会生效。
对于其他块级元素, 例如 div、p 等, 默认情况是不支持的。
为了使用 vertical-align, 我们需要设置父元素 display:table, 子元素 display:table-cell;vertical-align:middle;
2、推荐阅读： 实用Tips - 28 - 私家藏货之@垂直居中 | 【嘘...】
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2019-6-20 15:57:16
置顶卡
千斤顶
显身卡
楼主
发表于 2019-6-21 09:14:08
发表于 2020-5-1 20:04:37
