Как центрировать три divs горизонтально внутри родительского div?

Я знаю, что этот вопрос часто спрашивали, но я никогда не могу заставить его работать. Можете ли вы сказать мне, что неправильно?

У меня есть три div в #container div, которые я хочу центрировать бок о бок. # Контейнер шириной 1000 пикселей (я хочу сохранить его таким образом). Вот мой код:

#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 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 greatest mysteries</h3>
    </a>
  </div>
</div>

Ответы

Ответ 1

Вы можете сделать это довольно просто, используя 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 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 greatest mysteries</h3>
          </a>
          </div>
          </div>
        </div>

Ответ 2

Решение с использованием 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 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 greatest mysteries</h3>
    </a>
  </div>
</div>

Ответ 3

Удалите все поплавки и замените их:

display: inline-block;

Кроме того, насколько я пробовал, с этим интервалом между div, вы не сможете отобразить их правильно. Сделайте пространство между #left, #center и #right divs меньше 50px или работайте с процентом (%).

Ответ 4

Вы можете использовать display:table для этого.

У вас может быть родительский div со стилем

display:table

и ваши 3 дочерних divs как

display:table-cell

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

<div id="container">
  <h2>Here 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 greatest mysteries</h3>
    </a>
  </div>
</div>

Ответ 5

удалите float и добавьте display: inline-block ко всем трем, затем добавьте text-align: center; в контейнер.

Ответ 6

Попробуйте это и добавьте float: left в правый, левый и центральный div и уменьшите маркер слева и справа центра div.

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

Ответ 7

Вместо добавления центра, слева и справа. Используйте 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 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 greatest mysteries</h3>
          </a>
    </li>
  </ul>
        </div>