Jak mogę wyrównać w poziomie moje elementy DIV?

Z jakiegoś powodu moje elementy div nie będą wyśrodkowywać poziomo w zawierającym element 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>

Czasami jest wiersz div z tylko jednym blokiem div. Co ja robię źle?

Aby osiągnąć to, co próbujesz:

Rozważ użycie display: inline-blockzamiast float.

Spróbuj tego:

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

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

PRÓBNY

• posiadanie margin: 0 auto;razem width: 100%jest bezużyteczne, ponieważ Twój element zajmie całą przestrzeń.

• float: leftprzesunie elementy w lewo, dopóki nie zostanie zabraknie miejsca, więc przejdą do nowej linii. Służy display: inline-blockdo wyświetlania elementów w tekście, ale z możliwością podania rozmiaru (w przeciwieństwie do miejsca, w display: inlinektórym szerokość / wysokość są ignorowane)

Wyrównanie w CSS było koszmarem. Na szczęście w 2009 roku W3C wprowadza nowy standard: Flexible Box . Jest to dobry poradnik o tym tutaj . Osobiście uważam, że jest to o wiele bardziej logiczne i łatwiejsze do zrozumienia niż inne metody.

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

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

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

Najnowszym trendem jest używanie Flex lub CSS Grid zamiast Float. Jednak nadal około 1% przeglądarek nie obsługuje Flex. Ale kogo tak naprawdę obchodzą starych użytkowników IE;)

Fiddle: Sprawdź tutaj

Kolejny działający przykład , przy użyciu display: inline-blockitext-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;
}

Skrzypce: http://jsfiddle.net/fNvgS/

Chociaż nie dotyczy to tego pytania (ponieważ chcesz wyrównać znaki <div>s wewnątrz kontenera), ale jest bezpośrednio powiązane: jeśli chcesz wyrównać tylko jeden element div w poziomie, możesz to zrobić:

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

Jeśli elementy mają być wyświetlane w jednej linii, a IE 6/7 nie ma znaczenia, rozważ użycie display: tablei display: table-cellzamiast float.

inline-blockprowadzi do poziomych przerw między elementami i wymaga zerowania tych luk. Najprostszym sposobem jest ustawienie font-size: 0elementu nadrzędnego, a następnie przywrócenie font-sizeelementów podrzędnych, które mają display: inline-block, ustawiając ich wartość font-sizea pxlub rem.

Wypróbowałem zaakceptowaną odpowiedź, ale w końcu stwierdziłem, że:

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

Jak dotąd działa dobrze.

Używam tych dwóch podejść, gdy muszę poradzić sobie z wyrównaniem elementów div w poziomie.
pierwszy ( wyrównanie do środka przy użyciu właściwości margin ):

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

Ustawienie automatycznego lewego i prawego marginesu określa, że ​​powinny one równo podzielić dostępny margines. Wyrównanie do środka nie działa, jeśli szerokość wynosi 100%.

i drugi:

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

Korzystanie z drugiego podejścia jest wygodne, gdy masz kilka elementów i chcesz, aby wszystkie były wyśrodkowane w jednej komórce tabeli (tj. Kilka przycisków w jednej komórce).