Jak mogę poziomo wyrównać moje DIV?

Question

Z jakiegoś powodu moje DIV nie skoncentruje się poziomo w elementu div:

.row { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 
.block { 
 
    width: 100px; 
 
    float: left; 
 
}

<div class="row"> 
 
    <div class="block">Lorem</div> 
 
    <div class="block">Ipsum</div> 
 
    <div class="block">Dolor</div> 
 
</div>

A czasami jest div wiersz z jednego bloku div w nim. Co ja robię źle?

Answer 1

Aby osiągnąć to, co staramy się robić:

Rozważ użycie display: inline-block zamiast float.

Answer 2

Spróbuj tego:

.row { 
    width: 100%; 
    text-align: center; // center the content of the container 
} 

.block { 
    width: 100px; 
    display: inline-block; // display inline with abality to provide width/height 
}​ 

DEMO

• mający margin: 0 auto; wraz z width: 100% jest bezużyteczny, ponieważ elementem weźmie pełną przestrzeń.

• float: left będzie unosić elementy po lewej stronie, dopóki nie pozostanie wolne miejsce, a więc przejdą do nowej linii. Użyj display: inline-block aby móc wyświetlać elementy inline, ale ze zdolnością do zapewnienia wielkości (w porównaniu do display: inline gdzie szerokość/wysokość są ignorowane)

Answer 3

Jeśli elementy mają być wyświetlane w jednej linii (i IE6/7 Wykonaj nie ma znaczenia), należy rozważyć użycie display: table/table-cell zamiast float.

Korzystanie inline-block prowadzi do poziomych szczelin pomiędzy elementami, a zatem wymaga, aby zrobić kolejne kroki do zera, że ​​luki (najprostszym sposobem jest ustawienie font-size: 0 dla elementu nadrzędnego, a następnie przywrócić font-size dla elementów podrzędnych, które display: inline-block).

Answer 4

Innym working example korzystając display: inline-block i text-align: center

HTML:

<div class='container'> 
    <div class='row'> 
     <div class='btn'>Hello</div> 
     <div class='btn'>World</div> 
    </div> 
    <div class='clear'></div> 
</div> 

CSS:

.container { 
    ... 
} 
.row { 
    text-align: center; 
} 
.btn { 
    display: inline-block; 
    margin-right: 6px; 
    background-color: #EEE; 
} 
.clear { 
    clear: both; 
} 

Fiddle: http://jsfiddle.net/fNvgS/

Answer 5

Mimo, że nie obejmuje to pytanie (bo chcesz wyrównać <div> s wewnątrz pojemnika), ale bezpośrednio powiązane: jeśli chcesz wyrównać tylko jeden div poziomo można to zrobić:

#MyDIV 
{ 
    display: table; 
    margin: 0 auto; 
} 

Answer 6

Próbowałem zaakceptowane odpowiedź , ale ostatecznie okazało się, że:

margin: 0 auto; 
width: anything less than 100%; 

Działa dobrze do tej pory.

Answer 7

Użyłem tych dwóch podejść, gdy potrzebuję obsługi wyrównania poziomego div.
pierwszy (Center Aligning Using the margin Property):

.center-horizontal-align { 
    margin-left: auto; 
    margin-right: auto; 
    width: (less than 100%) or in px 
} 

Ustawianie lewy i prawy margines na auto określa, że ​​powinny one podzielone dostępny margines jednakowo. Wyrównanie do środka nie ma wpływu, jeśli szerokość wynosi 100%.

a drugi:

.center-horizontal-align { 
    display: table 
    margin-left: auto; 
    margin-right: auto; 
} 

Korzystanie drugie podejście jest wygodne, gdy masz kilka elementów i chcesz wszystkie z nich mają być skoncentrowane w jednej komórce tabeli (tzn kilka przycisków w jednej komórce.).

Answer 8

Dopasowania w CSS były koszmarem. Na szczęście w 2009 roku W3C wprowadził nowy standard: Flexible Box. Istnieje dobry tutorial o tym here. Osobiście uważam, że jest to dużo bardziej logiczne i łatwiejsze do zrozumienia niż inne metody.

.row { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
.block { 
 
    width: 100px; 
 
}

<div class="row"> 
 
    <div class="block">Lorem</div> 
 
    <div class="block">Ipsum</div> 
 
    <div class="block">Dolor</div> 
 
</div>

Answer 9

Używanie schematu flexbox:

<div class="row"> 
    <div class="block">Lorem</div> 
    <div class="block">Ipsum</div> 
    <div class="block">Dolor</div> 
</div> 

.row { 
    width: 100%; 
    margin: 0 auto; 
    display: flex; 
    justify-content: center; /* for centering 3 blocks in the center */ 
    /* justify-content: space-between; for space in between */ 
} 
.block { 
    width: 100px; 
} 

Najnowszy trend jest użycie CSS Flex lub siatkę zamiast używać pływaka. Jednak nadal około 1% przeglądarek nie obsługuje Flex. Ale kto naprawdę troszczy się o starych użytkowników IE i tak;)

Fiddle: Check Here