Влево, вправо и в центре Выровнять дочерний div под родительским контейнером Div

Question

Я хочу выровнять дочернее Div под моим родительским Div на основе его класса влево, вправо или в центр.

я сделал следующее,

.container{ 
 
    border:1px solid; 
 
    padding:1px; 
 
    width:100%; 
 
    margin:1px; 
 
} 
 

 
.left-item{ 
 
    float:left; 
 
    padding:auto; 
 
    margin:1px; 
 
} 
 

 
.center-item{ 
 
    padding:auto; 
 
    margin:1px; 
 
} 
 

 
.right-item{ 
 
float:right; 
 
padding:auto; 
 
    margin:1px; 
 
}

<div class="container">   
 
    <button class="left-item">Left</button> <button class="center-item">Center 2</button> <button class="right-item">Right</button> <button class="left-item">Left</button> <button class="right-item">Right</button> <button class="center-item">Center 1</button> <button class="center-item">Center 3</button>   
 
</div>

Я не могу совместятсяchild Divs к центру родителю Divs. Кто-нибудь может мне с этим помочь?

Answer 1

Просто дайте выравнивания текста: центр свойство контейнера дел. JS скрипку - https://jsfiddle.net/72aqsq83/1/

.container{ 
    border:1px solid; 
    padding:1px; 
    width:100%; 
    margin:1px; 
    text-align:center 
} 

Answer 2

Я думаю, вы должны использовать свойства flexboxbox CSS.
Это, вероятно, решить вашу проблему:

.container { 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: space-around; 
} 

Чтобы узнать больше о свойствах Flexbox, вот какая-то связь рекомендую:
MDN - Using CSS flexible boxes
MDN - flex-flow
MDN - justify-content

CSS-гибкие коробки прост в использовании и полностью поддерживается:
CanIUse - "flexbox"

Answer 3

Простейший способ разделить ящик на левый, центральный и правый - с помощью CSS flexbox. Обернув влево, вправо и вправо в новом div и превратив контейнер в flexbox с display:flex, вы сможете эмулировать это поведение с гораздо меньшим количеством кода.

.container { 
 
    border: 1px solid; 
 
    padding: 1px; 
 
    width: 100%; 
 
    margin: 1px; 
 
    display:flex; 
 
    justify-content:space-between; 
 
}

<div class="container"> 
 
    <div> 
 
    <button>Left</button> 
 
    <button>Left</button> 
 
    </div> 
 
    <div> 
 
    <button>Center 2</button> 
 
    <button>Center 1</button> 
 
    <button>Center 3</button> 
 
    </div> 
 
    <div> 
 
    <button>Right</button> 
 
    <button>Right</button> 
 
    </div> 
 
</div>