Як я можу горизонтально вирівняти свої діви?

Чомусь мої диви не будуть розташовуватися горизонтально по центру, що містить 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>

І іноді є рядок div з лише одним діловим блоком. Що я роблю неправильно?

Щоб досягти того, що ви намагаєтесь зробити:

Подумайте про використання display: inline-blockзамість float.

Спробуйте це:

.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
}​

DEMO

• мати margin: 0 auto;разом з цим width: 100%марно, тому що ти елемент займеш повний простір.

• float: leftбуде плавати елементами ліворуч, поки не залишиться місця, таким чином вони перейдуть на новий рядок. Використовуйте display: inline-blockдля відображення елементів в рядку, але з можливістю надання розміру (на відміну від display: inlineмісця ігнорування ширини / висоти)

Вирівнювання в CSS було кошмаром. На щастя, W3C в 2009 році запровадив новий стандарт: гнучкий Box . Існує хороший підручник про це тут . Особисто мені здається, що це набагато логічніше і легше зрозуміти, ніж інші методи.

.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>

Використання 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;
}

Остання тенденція - використовувати Flex або CSS Grid замість Float. Однак деякі 1% ​​браузерів не підтримують Flex. Але хто все одно переймається старими користувачами IE;)

Fiddle: Перевірте тут

Ще один робочий приклад з використанням display: inline-blockі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/

Хоча це питання не стосується (тому що ви хочете вирівняти <div>s всередині контейнера), але безпосередньо пов'язане: якщо ви хочете вирівняти лише один роздільник горизонтально, ви можете це зробити:

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

Якщо елементи мають бути відображені в одному рядку, а IE 6/7 не мають значення, розгляньте використання display: tableта display: table-cellзамість цього float.

inline-blockпризводить до горизонтальних проміжків між елементами і вимагає нулювання цих проміжків. Найпростіший спосіб - встановити font-size: 0для батьківського елемента, а потім відновити font-sizeдля дочірніх елементів, які мають display: inline-block, встановивши їх font-sizeна a pxабо remзначення.

Я спробував прийняту відповідь, але врешті-решт виявив, що:

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

Добре працює поки що.

Я використовую ці два підходи, коли мені потрібно обробити горизонтальне вирівнювання ділів.
по-перше ( Вирівнювання по центру за допомогою властивості поля ):

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

Встановлюючи лівий і правий поля в автоматичному режимі, вказується, що вони повинні розділити наявний запас порівну. Вирівнювання по центру не має ефекту, якщо ширина становить 100%.

і друге:

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

Використовувати другий підхід зручно, коли у вас є кілька елементів, і ви хочете, щоб усі вони були в центрі однієї комірки таблиці (тобто декілька кнопок в одній комірці).