【HTML中垂直居中】【容器】使用table中的vertical
作者:
fanlehai | 来源:发表于
2018-11-02 13:59 被阅读1次
- 使用table中的vertical-align属性,把div当成table:
- cell的子元素都会垂直居中；
<html>
<head>
<style type="text/css">
#wrapper {
display: table;
height: 100px;
background-color: rgb(87, 87, 92);
}
#cell {
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="cell">
<div class="content">Content goes here</div>
</div>
</div>
</body>
</html>
-
【优点】
content 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时， content 不会被截断
-
【缺点】
Internet Explorer(甚至 IE8 beta)中无效，许多嵌套标签(其实没那么糟糕，另一个专题)
参考链接：
本文标题：【HTML中垂直居中】【容器】使用table中的vertical
本文链接：https://www.haomeiwen.com/subject/sgtcxqtx.html
网友评论