父div中的中心3 div

Question

I am trying to center 3 div into a parent div with no result. Could you help me please ?

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 the float:left; to display:inline-block; , like this:

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

Answer 2

you can try this one:

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

DEMO HERE

Answer 3

Try display flex. You'll need to add vendor prefixes!

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

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> 

Answer 5

Add Bootstrap CSS and have a look at this example.

Here:

• COL=Column
• MD=Medium Sized Device
• 4 represents the partition of the screen as the Maximum column possible in a single row is 12

So 4/12=3 Panels in result.

<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's link for the Grip System you want Bootstrap Grid System .

Answer 6

remove float & add display inline-block

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

Answer 7

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

Thanks