How to center three divs horizontally within a parent div? [duplicate]

Answer 1

Try this, and add float:left to your right,left and center div and reduce your margin left and right of center div.

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

Answer 2

Instead adding center, left and right. Use ul and set the width of li in percentage. It will improve the code and reduce the css code.

The codepen url is 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>

Answer 3

Remove all the floats and replace them with :

display: inline-block;

Also, as much as i have tried, with that spacing between divs, you wont be able to display them the right way. Make the space between the #left, #center and #right divs less than 50px, or work with percentage(%).

Answer 4

You can do that quite simple using 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>

Answer 5

You may use display:table for that..

You can have Parent div with style

display:table

and your 3 child divs as

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

Answer 6

A solution using display: flex. Read more about flexbox here

1. Apply display: flex to the container
2. Add flex: 1 to all the child's which are to be centered horizontally.

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>