html – 中心一个div容器,而不设置宽度

概述我正在努力使我的角色回应中心.但是我无法设置宽度 <div class="wrapper"> <div class="container"> <div class="left box">Content</div> <div class="right box">Content</div> </div></div>.wrapper {text-al 我正在努力使我的角色回应中心.但是我无法设置宽度

<div >    <div >        <div >Content</div>        <div >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}

我如何保持容器在中间？

演示：http://jsfiddle.net/z9zydnwL/

解决方法 Flexbox甚至可以中心漂浮的孩子！

所以我可以简单地添加display：flex和justify-content：center;到容器

.container {    margin: 10px auto;    display:flex;    justify-content: center; /* align horizontal */}

FIDDLE

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 >  <div >    <div >Content</div>    <div >Content</div>  </div></div>

总结

以上是内存溢出为你收集整理的html – 中心一个div容器,而不设置宽度全部内容，希望文章能够帮你解决html – 中心一个div容器,而不设置宽度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。