Center 3 div in parent div

Question

I am trying to center 3 divs in the parent div with no result. could you help me?

HTML:

<div id="container">
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
</div>

CSS:

#container {
   text-align: center;
}

#left, #middle, #right {
    width: 200px;
    float: left;
    background: red;
    height: 90px;
}

RESULT:

Answer 1

Change float:left;to display:inline-block;, for example:

#left, #middle, #right {
    width: 200px;
    display:inline-block;
    background: red;
    height: 90px;
}

Answer 2

you can try the following:

#left, #middle, #right {
     width: 200px;
      display:inline-block;
      background: red;
      height: 90px;
}

DEMO HERE

Answer 3

flex. !

#container {
   text-align: center;
  
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#left, #middle, #right {
    width: 200px;
    background: red;
    height: 90px;
  
}

<div id="container">
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
</div>

Hide result

Answer 4

#container {
   text-align: center;
}

#left, #middle, #right {
    width: 200px;
    margin:0px auto;
    height: 90px;
}

#left
{
  background: red;
}

#middle
{
  background:blue;
}

#right
{
  background: green;
}

<div id="container">
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
</div>

Hide result

Answer 5

Bootstrap CSS .

:

• COL =
• MD =
• 4 , , , 12

, 4/12 = 3 .

<div class="row">
  <div class="col-md-4">left</div>
  <div class="col-md-4">middle</div>
  <div class="col-md-4">right</div>
</div>

Try Bootstrap, it will make your life easy. Here is the link for the Grip System you want the Bootstrap Grid System .

Answer 6

delete floatand add displayinline-block

#left, #middle, #right {
    width: 200px;
    display:inline-block;
    background: red;
    height: 90px;
}

Answer 7

Add margin-left: auto, margin-right:auto, width: 600pxto your container.

thanks