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

这个问题在这里已经有了答案：

如何在另一个<div>中水平居中<div>？ 82个答案

---

使用flexbox可以非常简单地实现这一点：

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

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

---

使用display: flex解决方案。 在此阅读更多关于flexbox的信息

将display: flex应用于容器

将flex: 1添加到要水平居中的所有孩子。

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>

---

删除所有的花车并将其替换为：

display: inline-block;

此外，尽可能多地尝试，与divs之间的间距，你将无法以正确的方式显示它们。 使#left，#center和#right div之间的空格小于50像素，或以百分比（％）工作。

链接地址: http://www.djcxy.com/p/13205.html

上一篇: How to center three divs horizontally within a parent div?

下一篇: How to horizontal & vertical center a div?