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

Ответ 1

Чтобы добиться того, что вы пытаетесь сделать:

Рассмотрим display: inline-block вместо float.

Ответ 2

Попробуй это:

.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 чтобы иметь возможность отображать элементы inline, но с возможностью предоставления размера (в отличие от display: inline где ширина/высота игнорируются)

Ответ 3

Другой рабочий пример, используя 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/

Ответ 4

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

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

Ответ 5

Использование 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;)

Скрипка: проверьте здесь

Ответ 6

Выравнивания в CSS были кошмаром. К счастью, в 2009 году W3C представил новый стандарт: Flexible Box. Существует хороший учебник об этом здесь. Лично я считаю, что это гораздо более логично и проще для понимания, чем другие методы.

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

Ответ 7

Если элементы должны отображаться в одной строке, а IE 6/7 не имеет значения, рассмотрите возможность использования display: table и display: table-cell вместо float.

inline-block приводит к горизонтальным промежуткам между элементами и требует обнуления этих промежутков. Самый простой способ - установить font-size: 0 для родительского элемента, а затем восстановить font-size для дочерних элементов, которые имеют display: inline-block, установив для их font-size значение px или rem.

Ответ 8

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

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

Хорошо работает до сих пор.

Ответ 9

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

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

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