无法居中divs HTML CSS

时间：2017-06-06 12:06:08

标签： html css

我遇到一个小问题，让我的div与对方坐在一起，并在父div的中心。所以我有一个父“页面”，然后是其他6个div，其中“pageName”位于“bg_01”，“bg_02”，“bg_03”，“bg_04”，“bg_05”，“bg_06”之上，所有这些都与内联彼此。然而，当窗口非常小时，它可以工作，但是当窗口是任何大小的时候我都试图让它工作，有人能看到我出错的地方吗？

再次感谢你们。

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>

5 个答案:

答案 0 :(得分：1)

只需将json添加到text-align: center;并替换#page宽度float:left;，它就应该有效。

如下：

display: inline-block

和css：

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

Here is the fiddle.

答案 1 :(得分：1)

带走Float：离开你的对象并给它们显示：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%;
}

答案 2 :(得分：0)

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>

答案 3 :(得分：0)

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>

这与您正在寻找的相同吗？

希望这有帮助。

答案 4 :(得分：0)

  

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

完整代码：

＆＃13;
＆＃13; 
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;
  }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题