html – 垂直和horinzontally对齐容器中的多个div子
发布时间:2020-12-14 23:27:35 所属栏目:资源 来源:网络整理
导读:我目前有以下代码: div id="container" div class="card"1/div div class="card"2/div div class="card"3/div div class="card"4/div/divstyle #container{ width:100%; height:100%; overflow-y:auto; position:absolute; left:0; top:10px; padding:10px;
我目前有以下代码:
<div id="container"> <div class="card">1</div> <div class="card">2</div> <div class="card">3</div> <div class="card">4</div> </div> <style> #container{ width:100%; height:100%; overflow-y:auto; position:absolute; left:0; top:10px; padding:10px; } .card{ width:100px; height:100px; margin:10px; float:left; } </style> 我试图垂直和水平对齐div框,以便出现更多的框,它仍然在容器中垂直和水平居中.例如:
解决方法
DEMO
HTML <div class="container"> <div class="container-wrapper"> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> </div> </div> CSS .container { position: relative; display:table; background: red; width:100%; height: 100%; /* auto is default,you can have ur height here */ } .container-wrapper { display: table-cell; margin:auto; text-align:center; font-size:0; width:90%; height:90%; vertical-align:middle; } .card { display: inline-block; height:100px; width:100px; border: 1px solid #ddd; background: #eee; margin:10px; } DEMO 2 with some height of the container (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |