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

发布时间：2020-12-14 23:39:01 所属栏目：资源来源：网络整理

导读：我正在努力使我的角色回应中心.但是我无法设置宽度 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

我正在努力使我的角色回应中心.但是我无法设置宽度

<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}

我如何保持容器在中间？

演示：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 class="wrapper">
  <div class="container">
    <div class="left box">Content</div>
    <div class="right box">Content</div>
  </div>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!