Горизонтально центрирующие элементы внутри div

Question

Чтобы сделать это проще, скажем, у вас был div шириной 100px и 3 div внутри внутри каждой ширины 20px. Как я могу выровнять их там, где они совпадают с центром div, оставляя 20px; разрыв на каждой стороне?

Answer 1

Центр некоторые HTML элементы всегда зависит от ваших зависимостей проекта и интеграции ...

Вы можете быть счастливы с этими 2 решениями, дисплей: встроенный блок; и float: left;

У обоих есть профи & минусы, надеюсь, что он может вам помочь!

http://jsfiddle.net/HP2DS/1/

<!-- Inline-block --> 
<div id='container'> 
    <div class='centered' id='content-left'></div><div class='centered' id='content-center'></div><div class='centered' id='content-right'></div> 
</div> 

#container { 
    width: 100px; 
    height: 80px; 
    text-align: center; 
    background: cyan; 
} 

#container .centered { 
    display: inline-block; 
    width: 20px; 
    height: 100%; 
    margin: auto; 
    background: magenta; 
    border: 1px solid black; 
    box-sizing: border-box; 
} 

<!-- Floating --> 
<div id='container-2'> 
    <div class='centered' id='content-2-left'></div> 
    <div class='centered' id='content-2-center'></div> 
    <div class='centered' id='content-2-right'></div> 
</div> 

#container-2 { 
    width: 60px; /* 60px + 2*20px of padding... */ 
    height: 80px; 
    padding: 0 20px; 
    text-align: center; 
    background: cyan; 
} 

#container-2 .centered { 
    float: left; 
    width: 20px; 
    height: 100%; 
    margin: auto; 
    background: magenta; 
    border: 1px solid black; 
    box-sizing: border-box; 
} 

Answer 2

Добрый день! Вот как я реализовал его:

HTML

<div id="container"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

CSS

#container { 
    width: 100px; 
    height: 100px; 
    border: 1px solid red; /** for viewing purposes **/ 
    text-align: center; /** center the divs **/ 
    font-size: 0; /** remove the unwanted space caused by display: inline-block in .child **/ 
} 

#container .child { 
    display: inline-block; /** set the divs side-by-side **/ 
    vertical-align: top; 
    width: 20px; 
    height: 100px; 
    font-size: 12px; /** override font-size: 0 of #container, so that text will be visible again **/ 
    text-align: left; /** set text in the .child divs back to normal alignment **/ 
    border: 1px solid blue; /** for viewing purposes **/ 
    box-sizing: border-box; 
} 

Я надеюсь, что это помогает. Ура! :)