您的位置：首页 > 其它

使用inline-block做水平垂直居中

2014-08-10 23:16 239 查看
父级宽高不定，如何使子元素水平垂直居中？

下面是用 display: inline-block 实现的：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直自适应</title>
<style>
* {
margin: 0; padding: 0;
}
.box {
position: relative;
width: 400px; height: 600px;
margin: 100px auto;
border: 1px solid #666;
text-align: center;
}
.content {
width: 100px; height: 100px;
display: inline-block;
vertical-align: middle;
background: red;
}
.middle-span {
height: 100%;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<div class="content"></div>
<span class="middle-span"></span>
</div>
</body>
</html>


子级 display: inline-block; ，父级 text-align: center; ，实现水平居中。

子级 vertical-align: middle; ，且span height: 100%; ，实现垂直居中。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航