Как я могу выровнять свои div по горизонтали?

По какой-то причине мои div не будут центрироваться по горизонтали в содержащем 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 было кошмаром. К счастью, в 2009 году W3C представила новый стандарт: Flexible 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;
}

Скрипка: http://jsfiddle.net/fNvgS/

Хотя это не касается этого вопроса (потому что вы хотите выровнять <div>s внутри контейнера), но напрямую связано: если вы хотите выровнять только один div по горизонтали, вы можете сделать это:

#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для них значение pxили rem.

Я попробовал принятый ответ, но в конце концов обнаружил, что:

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

Пока работает хорошо.

Я использую эти два подхода, когда мне нужно обрабатывать горизонтальное выравнивание div.
сначала ( выравнивание по центру с использованием свойства поля ):

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

Установка для левого и правого полей значения auto указывает, что они должны разделить доступное поле поровну. Выравнивание по центру не действует, если ширина равна 100%.

и второй:

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

Использование второго подхода удобно, когда у вас есть несколько элементов и вы хотите, чтобы все они были центрированы в одной ячейке таблицы (т.е. несколько кнопок в одной ячейке).