如何在父div中水平居中三个div？

时间：2016-06-15 09:16:49

标签： html css

我知道这个问题经常被问到，但我似乎永远无法让它发挥作用。你能告诉我什么是错的吗？

我在#container div中有三个div，我想并排放置。 #container是1000px宽（我希望保持这种方式）。这是我的代码：

#container {
  margin-top: 500px;
  position: absolute;
  width: 1000px;
}
.related-article {
  background-color: #D6A400;
  display: inline-block;
  width: 230px;
  height: 300px;
  border-radius: 30px;
  margin-bottom: 0px;
}
.related-article > img {
  width: 200px;
  height: 150px;
  border-radius: 15px;
  margin-top: 15px;
}
.related-article > h3 {
  font-size: 15px;
  width: 180px;
  text-align: justify;
  margin-left: auto;
  margin-right: auto;
  color: #f1f1f1;
  font-family: Abel, serif;
  margin-bottom: none;
}
a {
  text-decoration: none;
}
#right {
  float: right;
}
#left {
  float: left;
}
#center {
  margin-left: 385px;
  margin-right: 385px;
}
<div id="container">
  <h2>Here's what you'll do!</h2>
  <div id="left">
    <a href="#" class="related-article first" align="middle">
      <img src="download.jpeg" alt="T-rex">
      <h3>Constructing amazing fossils you never even dreamed of</h3>
    </a>
  </div>
  <div id="center">
    <a href="#" class="related-article second" align="middle">
      <img src="fossil-fish-10-lg.jpg" alt="Fish">
      <h3>Studying ancient marine biology</h3>
    </a>
  </div>
  <div id="right">
    <a href="#" class="related-article third" align="middle">
      <img src="fossil.turtle2.jpg" alt="Turtle">
      <h3>Uncovering the world's greatest mysteries</h3>
    </a>
  </div>
</div>

非常感谢所有帮助。

7 个答案:

答案 0 :(得分：8)

使用flexbox可以很简单：

＆＃13;
＆＃13; 
#container {
/*     margin-top: 500px; */
  width: 1000px;
  margin: 0 auto;
}
.related-article {
  background-color: #D6A400;
  display: inline-block;
  border-radius: 30px;
  margin-bottom: 0px;
}
.related-article > img {
    width: 200px;
    height: 150px;
    border-radius: 15px;
    margin-top: 15px;
}
.related-article > h3 {
  font-size: 15px;
  width: 180px;
  text-align: justify;
  margin-left: auto;
  margin-right: auto;
  color: #f1f1f1;
  font-family: Abel, serif;
  margin-bottom: none;
}
a {
    text-decoration: none;
}

}
#container {
    width: 1000px;
}

.related-article {
  background-color: #D6A400;
  display: inline-block;
  width: 230px;
  height: 300px;
  border-radius: 30px;
  margin-bottom: 0px;
}
.related-article > img {
    width: 200px;
    height: 150px;
    border-radius: 15px;
    margin-top: 15px;
}
.related-article > h3 {
  font-size: 15px;
  width: 180px;
  text-align: justify;
  margin-left: auto;
  margin-right: auto;
  color: #f1f1f1;
  font-family: Abel, serif;
  margin-bottom: none;
}
a {
    text-decoration: none;
}
.box {
  margin-right: 10px;
    width: 230px;
  height: 300px;
  }

.flex-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
＆＃13; 
<div id="container">
        <h2>Here's what you'll do!</h2>
        <div class="flex-container">
        <div id="left" class="box">
          <a href="#" class="related-article first" align="middle">
            <img src="download.jpeg" alt="T-rex">
            <h3>Constructing amazing fossils you never even dreamed of</h3>
          </a>
          </div>
          <div id="center"  class="box">
          <a href="#" class="related-article second" align="middle">
            <img src="fossil-fish-10-lg.jpg" alt="Fish">
            <h3>Studying ancient marine biology</h3>
          </a>
          </div>
          <div id="right"  class="box">
          <a href="#" class="related-article third" align="middle">
            <img src="fossil.turtle2.jpg" alt="Turtle">
            <h3>Uncovering the world's greatest mysteries</h3>
          </a>
          </div>
          </div>
        </div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：5)

使用display: flex的解决方案。阅读有关flexbox here

的更多信息
  1. 将display: flex应用于容器
  2. 将flex: 1添加到要水平居中的所有孩子。

    3. h2 {
  margin-top: 500px;
}
#container {
  position: absolute;
  width: 1000px;
  display: flex;
  text-align: center;
}
#container div {
  flex: 1;
}
.related-article {
  background-color: #D6A400;
  display: inline-block;
  width: 230px;
  height: 300px;
  border-radius: 30px;
  margin-bottom: 0px;
}
.related-article > img {
  width: 200px;
  height: 150px;
  border-radius: 15px;
  margin-top: 15px;
}
.related-article > h3 {
  font-size: 15px;
  width: 180px;
  text-align: justify;
  margin-left: auto;
  margin-right: auto;
  color: #f1f1f1;
  font-family: Abel, serif;
  margin-bottom: none;
}
a {
  text-decoration: none;
}
    <h2>Here's what you'll do!</h2>
<div id="container">
  <div id="left">
    <a href="#" class="related-article first" align="middle">
      <img src="download.jpeg" alt="T-rex">
      <h3>Constructing amazing fossils you never even dreamed of</h3>
    </a>
  </div>
  <div id="center">
    <a href="#" class="related-article second" align="middle">
      <img src="fossil-fish-10-lg.jpg" alt="Fish">
      <h3>Studying ancient marine biology</h3>
    </a>
  </div>
  <div id="right">
    <a href="#" class="related-article third" align="middle">
      <img src="fossil.turtle2.jpg" alt="Turtle">
      <h3>Uncovering the world's greatest mysteries</h3>
    </a>
  </div>
</div>

答案 2 :(得分：4)

删除所有浮动并将其替换为：

display: inline-block;

此外，尽管我已经尝试过，div之间的间距，你将无法以正确的方式显示它们。使＃left，＃center和#right div之间的空间小于50px，或使用百分比（％）。

答案 3 :(得分：2)

您可以使用display:table ...

您可以使用样式

的父div 
display:table-cell

和你的3个孩子一样

#container {
  margin-top: 500px;
  position: absolute;
  width: 1000px;
}
.related-article {
  background-color: #D6A400;
  display: inline-block;
  width: 230px;
  height: 300px;
  border-radius: 30px;
  margin-bottom: 0px;
}
.related-article > img {
  width: 200px;
  height: 150px;
  border-radius: 15px;
  margin-top: 15px;
}
.related-article > h3 {
  font-size: 15px;
  width: 180px;
  text-align: justify;
  margin-left: auto;
  margin-right: auto;
  color: #f1f1f1;
  font-family: Abel, serif;
  margin-bottom: none;
}
a {
  text-decoration: none;
}
#container {
  margin-top: 500px;
  position: absolute;
  width: 1000px;
  display: table;
}
.related-article {
  background-color: #D6A400;
  display: inline-block;
  width: 230px;
  height: 300px;
  border-radius: 30px;
  margin-bottom: 0px;
}
.related-article > img {
  width: 200px;
  height: 150px;
  border-radius: 15px;
  margin-top: 15px;
}
.related-article > h3 {
  font-size: 15px;
  width: 180px;
  text-align: justify;
  margin-left: auto;
  margin-right: auto;
  color: #f1f1f1;
  font-family: Abel, serif;
  margin-bottom: none;
}
a {
  text-decoration: none;
}
#left,
#right,
#center {
  display: table-cell;
}
#center {
  margin-left: 385px;
  margin-right: 385px;
}
h2 {
  display: table-row;
}

＆＃13;
＆＃13; 
<div id="container">
  <h2>Here's what you'll do!</h2>
  <div id="left">
    <a href="#" class="related-article first" align="middle">
      <img src="download.jpeg" alt="T-rex">
      <h3>Constructing amazing fossils you never even dreamed of</h3>
    </a>
  </div>
  <div id="center">
    <a href="#" class="related-article second" align="middle">
      <img src="fossil-fish-10-lg.jpg" alt="Fish">
      <h3>Studying ancient marine biology</h3>
    </a>
  </div>
  <div id="right">
    <a href="#" class="related-article third" align="middle">
      <img src="fossil.turtle2.jpg" alt="Turtle">
      <h3>Uncovering the world's greatest mysteries</h3>
    </a>
  </div>
</div>
＆＃13; 
$scope.$watch('vm', function (newVal, oldVal) {
    console.log('newVal, oldVal', newVal, oldVal);
}, true);
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：1)

从中删除float并将display: inline-block添加到所有三个，然后将text-align: center;添加到容器中。

答案 5 :(得分：1)

试试这个，然后将 float：left 添加到右侧，左侧和中间div，并减少中间div的左右边距。

#right {
float: left;
}
#left {
float: left;
}
#center {
margin-left: 85px;
margin-right: 85px;
float:left;
}

答案 6 :(得分：1)

而是添加中心，左右。使用ul并设置li的宽度百分比。它将改进代码并减少css代码。

codepen网址为http://codepen.io/SESN/pen/pbbjrb

CSS 

#container { width: 100%; }
.ulContainer { margin: 0px auto; list-style: none; width: 80%; }
.ulContainer li { width: 33.33%; float: left; }

HTML 

<div id="container">
        <h2>Here's what you'll do!</h2>
  <ul class="ulContainer">
  <li>
    <a href="#" class="related-article first" align="middle">
            <img src="download.jpeg" alt="T-rex">
            <h3>Constructing amazing fossils you never even dreamed of</h3>
          </a>
  </li>
    <li>
    <a href="#" class="related-article second" align="middle">
            <img src="fossil-fish-10-lg.jpg" alt="Fish">
            <h3>Studying ancient marine biology</h3>
          </a>
    </li>
    <li>
    <a href="#" class="related-article third" align="middle">
            <img src="fossil.turtle2.jpg" alt="Turtle">
            <h3>Uncovering the world's greatest mysteries</h3>
          </a>
    </li>
  </ul>
        </div>
相关问题
最新问题