我正在尝试以响应方式将我的 div 居中。但是如果不设置宽度我无法做到这一点......
<div class="wrapper">
<div class="container">
<div class="left box">Content</div>
<div class="right box">Content</div>
</div>
</div>
.wrapper {text-align:center}
.container {width:100%; margin: 10px auto}
.left {width:69%;max-width:350px; background:blue}
.right {width:29%;max-width:150px; background:red}
.box {float:left;padding:20px}
如何将 .container
放在中间?
最佳答案
Flexbox甚至可以让漂浮的 child 居中!
所以我可以简单地将 display:flex
和 justify-content: center;
添加到容器中
.container {
margin: 10px auto;
display:flex;
justify-content: center; /* align horizontal */
}
Browser support这几天也不错
.wrapper {
width: 100%;
text-align: center
}
.container {
margin: 10px auto;
display: flex;
justify-content: center;
/* align horizontal */
}
.left {
width: 69%;
max-width: 350px;
background: blue
}
.right {
width: 29%;
max-width: 150px;
background: red
}
.box {
float: left;
padding: 20px
}
<div class="wrapper">
<div class="container">
<div class="left box">Content</div>
<div class="right box">Content</div>
</div>
</div>
关于html - 居中一个没有设置宽度的div容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26970488/