Центр 3 div в родительском div

Question

Я пытаюсь центрировать 3 div в родительский div без результата. Не могли бы вы мне помочь?

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

РЕЗУЛЬТАТ:

Answer 1

удалить float & добавить дисплей inline-block

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

Answer 2

Измените float:left; на display:inline-block;, как это:

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

Answer 3

Добавить margin-left: auto, margin-right:auto, width: 600px в свой контейнер.

Благодаря

Answer 4

вы можете попробовать это один:

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

DEMO HERE

Answer 5

Try дисплей прогибается. Вам нужно добавить префиксы поставщиков!

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

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

Добавить 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> 

Попробуйте Bootstrap, это сделает вашу жизнь легкой. Ссылка для системы захвата, которую вы хотите Bootstrap Grid System.