多行垂直居中做到了 但如何同时做到水平居中呀
来源：9-1 9. vertical-align的实际应用_x264
慕婉清2352981
2017-10-24 20:30
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
height: 300px;background: red;
}
.con {
display: inline-block;
vertical-align: middle;
}
p {
margin-left: 800px;
}
i {
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div >
<div>
<p>1hang</p>
<p>1hang</p>
<p>1hang</p>
<p>1hang</p>
<p>1hang</p>
</div><i></i>
</div>
</body>
</html>
写回答
关注
1回答
-
- 留白未来
- 2017-11-02 07:30:48
没必要加太多东西. con类你已经设成了inline-block,那么在父盒子上就可以直接text-align: center;另外你这垂直居中的效果不太对.box类上不是height,而是line-height.将你的代码简单修改了一下,你看看效果是不是你想要的.
html部分
<body> <div class="box"> <div class="con"> <p>1hang</p> <p>1hang</p> <p>1hang</p> <p>1hang</p> <p>1hang</p> </div> </div> </body>
css部分
.box { line-height: 300px; background: red; text-align: center; } .con { line-height: normal; display: inline-block; vertical-align: middle; border: 1px dashed blueviolet; }
CSS深入理解之vertical-align
深入理解vertical-align的属性值，分享开发中应用经验
39337 学习 · 57 问题
相似问题