Выравнивание Div метки рядом друг с другом и центрирования затем

Question

Я хотел бы, чтобы выровнять 3 дивы рядом друг с другом и центром внутри большего DIV HTML

<div id="wrapper"> 
    <div id="first"></div> 
    <div id="second"></div> 
    <div id="third"></div> 

Что должно быть в моем CSS?

Answer 1

<div id="wrapper"> 
       <div class="Cell" id="first"> 
        <p>first</p> 
       </div> 
       <div class="Cell" id="second"> 
        <p>second</p> 
       </div> 
       <div class="Cell" id="third"> 
        <p>third</p> 
       </div> 
      </div> 
     </div> 

<style> 
    .Row 
    { 
     display: table-row; 
    } 
    .Cell 
    { 
     display: table-cell; 
     border: solid; 
     border-width: thin; 
     padding-left: 5px; 
     padding-right: 5px; 
    } 
#first{ 
    width:20%; 
} 
#second{ 
    width:60%; 
} 
#third{ 
    width:20%; 
} 

Answer 2

Это то, что я решил использовать

HTML

<div id="wrapper"> 
    <div id="first" style="margin-left:25%;"></div> 
    <div id="second"></div> 
    <div id="third"></div> 
</div> 

CSS

#wrapper { 
      width: 100%; 
      min-width: 900px; 
    } 
#first { 
      width:100px; 
      float:left; 
} 
#second { 
      width:100px; 
      float:left; 
} 
#third { 
      width:100px; 
      float:left; 
} 

Answer 3

если вы использовали поплавок:

body { 
 
    text-align: center; 
 
} 
 
#wrapper { 
 
    display: inline-block; /* inline-table will do too */ 
 
} 
 
#wrapper div { 
 
    float: left; 
 
    width: 100px; 
 
    min-height: 5em; 
 
    border: solid; 
 
}

<div id="wrapper"> 
 
    <div id="first"></div> 
 
    <div id="second"></div> 
 
    <div id="third"></div> 
 
</div>

с поплавком + стол

#wrapper { 
 
    display:table; 
 
    margin:auto; 
 
    } 
 
#wrapper > div { 
 
    float:left; 
 
    width:100px; 
 
    min-height:5em; 
 
    border:solid; 
 
    }

<div id="wrapper"> 
 
    <div id="first"></div> 
 
    <div id="second"></div> 
 
    <div id="third"></div> 
 
</div>

со столом и столом-клетки;

#wrapper { 
 
    display:table; 
 
    margin:auto; 
 
    } 
 
#wrapper > div { 
 
    display:table-cell; 
 
    width:100px; 
 
    height:5em; 
 
    border:solid; 
 
    }

<div id="wrapper"> 
 
    <div id="first"></div> 
 
    <div id="second"></div> 
 
    <div id="third"></div> 
 
</div>

со шлейфом;

#wrapper { 
 
    display:flex; 
 
    justify-content:center; 
 
    margin:auto; 
 
    } 
 
#wrapper > div { 
 
    width:100px; 
 
    height:5em; 
 
    border:solid; 
 
    }

<div id="wrapper"> 
 
    <div id="first"></div> 
 
    <div id="second"></div> 
 
    <div id="third"></div> 
 
</div>

и они могут быть много вариаций в зависимости от поведения ожидаемого последнего.