无法居中 div HTML CSS答案

【问题标题】：Can't center divs HTML CSS无法居中 div HTML CSS
【发布时间】：2017-06-06 21:03:12
【问题描述】：

我在让我的 div 彼此内联并位于父 div 的中心时遇到了一个小问题。所以我有一个父“页面”，然后是位于“bg_01”、“bg_02”、“bg_03”、“bg_04”、“bg_05”、“bg_06”之上的“pageName”中的 6 个其他 div，它们都与彼此。但是当窗口很小时它可以工作但是我试图让它在窗口是任何大小时工作，任何人都可以看到我哪里出错了吗？

再次感谢各位。

p {
  margin: 0;
}

#page {
  border: 2px solid #e1dfe1;
  border-radius: 5px;
  background-color: #fff;
  width: 100%;
  height: 200px;
  margin-top: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#pageName {
  background-color: #f5f0f5;
  border-bottom: 2px solid #e1dfe1;
}

#pageName p {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  color: #565656;
  font-weight: bold;
}

#bg_01 {
  background-color: #80b3ff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
  float: left;
}

#bg_02 {
  background-color: #afe9af;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
  float: left;
}

#bg_03 {
  background-color: #ffb380;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
  float: left;
}

#bg_04 {
  background-color: #ffaaaa;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
  float: left;
}

#bg_05 {
  background-color: #eeaaff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
  float: left;
}

<div id="page">
  <div id="pageName" }>
    <p>Colour</p>
  </div>
  <div id="bg_01">
  </div>

  <div id="bg_02">
  </div>

  <div id="bg_03">
  </div>

  <div id="bg_04">
  </div>

  <div id="bg_05">
  </div>
</div>

【问题讨论】：

stackoverflow.com/questions/19032103/…
使用 display:inline-block 而不是向左浮动，这会让事情变得更容易——我想说 css 已经不再需要浮动项目了
@Hardik - 哈哈，同一所学校 :)

标签： html css

【解决方案1】：

只需将text-align: center; 添加到#page 并替换float:left; 宽度display: inline-block 即可。

如下：

<div id="page">
  <div id="pageName" }>
    <p>Colour</p>
  </div>
  <div id="bg_01">
  </div>

  <div id="bg_02">
  </div>

  <div id="bg_03">
  </div>

  <div id="bg_04">
  </div>

  <div id="bg_05">
  </div>
</div>

还有css：

p {
  margin: 0;
}

#page {
  border: 2px solid #e1dfe1;
  border-radius: 5px;
  background-color: #f00;
  width: 100%;
  height: 100%;
  margin-top: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
}

#pageName {
  background-color: #f5f0f5;
  border-bottom: 2px solid #e1dfe1;
}

#pageName p {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  color: #565656;
  font-weight: bold;
}

#bg_01 {
  background-color: #80b3ff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
  display: inline-block;
}

#bg_02 {
  background-color: #afe9af;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
  display: inline-block;
}

#bg_03 {
  background-color: #ffb380;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
  display: inline-block;
}

#bg_04 {
  background-color: #ffaaaa;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
  display: inline-block;
}

#bg_05 {
  background-color: #eeaaff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
  display: inline-block;
}

Here is the fiddle.

【讨论】：

【解决方案2】：

从你的对象中取出 Float: left 并给它们 display: inline-block。

还将 text-align: center 设置为您的父 div

p {
  margin: 0;
}

#page {
  border: 2px solid #e1dfe1;
  border-radius: 5px;
  background-color: #fff;
  width: 100%;
  height: 200px;
  margin-top: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
}

#pageName {
  background-color: #f5f0f5;
  border-bottom: 2px solid #e1dfe1;
}

#pageName p {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  color: #565656;
  font-weight: bold;
}

#bg_01 {
  display: inline-block;
  background-color: #80b3ff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
}

#bg_02 {
  display: inline-block;
  background-color: #afe9af;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
}

#bg_03 {
  display: inline-block;
  background-color: #ffb380;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
}

#bg_04 {
  display: inline-block;
  background-color: #ffaaaa;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
}

#bg_05 {
  display: inline-block;
  background-color: #eeaaff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
}

【讨论】：

【解决方案3】：

1) 将 DIV 中的元素包装为 center 类

<div class="center"> <-------------------

  <div id="bg_01">
  </div>
  <div id="bg_02">
  </div>
  <div id="bg_03">
  </div>
  <div id="bg_04">
  </div>
  <div id="bg_05">
  </div>

</div>

2) 删除float: left; 并使用display:inline block

#bg_01,#bg_02,#bg_03,#bg_04,#bg_05 {
  display: inline-block;
  float: left;<--------Remove
  More code...
}

3) 为.center 添加了css：

.center {
  text-align: center;
  }

完整代码：

p {
  margin: 0;
}

#page {
  border: 2px solid #e1dfe1;
  border-radius: 5px;
  background-color: #fff;
  width: 100%;
  height: 200px;
  margin-top: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

}

#pageName {
  background-color: #f5f0f5;
  border-bottom: 2px solid #e1dfe1;
}

#pageName p {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  color: #565656;
  font-weight: bold;
}

#bg_01 {
  background-color: #80b3ff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
  display: inline-block;

}

#bg_02 {
  background-color: #afe9af;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
display: inline-block;
}

#bg_03 {
  background-color: #ffb380;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
display: inline-block;
}

#bg_04 {
  background-color: #ffaaaa;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
display: inline-block;
}

#bg_05 {
  background-color: #eeaaff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
display: inline-block;
}
.center {
  text-align: center;
  }

<div id="page">
  <div id="pageName">
    <p>Colour</p>
  </div>
  <div class="center">
    <div id="bg_01">
    </div>
    <div id="bg_02">
    </div>
    <div id="bg_03">
    </div>
    <div id="bg_04">
    </div>
    <div id="bg_05">
    </div>
  </div>
</div>

【讨论】：

【解决方案4】：

p {
  margin: 0;
}

#page {
  border: 2px solid #e1dfe1;
  border-radius: 5px;
  background-color: #fff;
  width: 100%;
  height: auto;
  margin-top: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
}
#page:after {
  content: '';
  display: table;
  clear: both;
}

#pageName {
  background-color: #f5f0f5;
  border-bottom: 2px solid #e1dfe1;
}

#pageName p {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  color: #565656;
  font-weight: bold;
}
.item {
  display: inline-block;
}
#bg_01 {
  background-color: #80b3ff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
}

#bg_02 {
  background-color: #afe9af;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
}

#bg_03 {
  background-color: #ffb380;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
}

#bg_04 {
  background-color: #ffaaaa;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
}

#bg_05 {
  background-color: #eeaaff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
}

<div id="page">
  <div id="pageName" }>
    <p>Colour</p>
  </div>
  <div id="bg_01" class="item">
  </div>

  <div id="bg_02" class="item">
  </div>

  <div id="bg_03" class="item">
  </div>

  <div id="bg_04" class="item">
  </div>

  <div id="bg_05" class="item">
  </div>
</div>

【讨论】：

【解决方案5】：

p {
  margin: 0;
}

#page {
  border: 2px solid #e1dfe1;
  border-radius: 5px;
  background-color: #fff;
  width: 100%;
  height: 200px;
  margin-top: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#pageName {
  background-color: #f5f0f5;
  border-bottom: 2px solid #e1dfe1;
}

#pageName p {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  color: #565656;
  font-weight: bold;
}

.center_div{
text-align:center;
margin:20px auto;
display:flex;
justify-content:center;
align-items:center;
}

.common_div{
width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 3%;
  display:inline-block;
}

#bg_01 {
  background-color: #80b3ff;
  
}

#bg_02 {
  background-color: #afe9af;
  
}

#bg_03 {
  background-color: #ffb380;
  
}

#bg_04 {
  background-color: #ffaaaa;
  
}

#bg_05 {
  background-color: #eeaaff;
  
}

<div id="page">
  <div id="pageName" >
    <p>Colour</p>
  </div>
  <div class="center_div">
  <div id="bg_01" class="common_div">
  </div>

  <div id="bg_02" class="common_div">
  </div>

  <div id="bg_03" class="common_div">
  </div>

  <div id="bg_04" class="common_div">
  </div>

  <div id="bg_05" class="common_div">
  </div>
  </div>
  
</div>

这和你要找的一样吗？

希望这会有所帮助。

【讨论】：