Как выровнять div по центру в HTML

Ранее были показаны способы вертикального выравнивания, теперь остановимся на горизонтальном.

text-align: center;

Свойство CSS text-align выравнивает содержимое тега и принимает значения

text-align: center;
по центру
text-align: justify; - по ширине, когда браузер добавляет пробелы между словами, чтобы не было отступов с краёв. text-align: justify; - по ширине выравнивается последняя или единственная строка
text-align: left;
по левому краю
text-align: right;
по правому краю

Если указать text-align: center для встроенного элемента [занимаемого только ширину содержимого], то ничего не произойдёт, поскольку тег не может себя двигать:
<span style="text-align: center;">текст</span>
текст

Если для блочного [занимаемого всю доступную ширину], то содержимое элемента переместиться в центр
<div style="text-align: center;">текст</div>
текст

В качестве содержимого может выступать и другой тег.
<div style="text-align: center;">
  <span>встроенный элемент <br /> в две строки</span>
</div>
встроенный элемент
в две строки

Помог при выравнивании модального окна на CSS:
<div style="text-align: center;">
  <div style="display: inline-block;">обтекаемый <br /> блочный элемент</div>
</div>
обтекаемый
блочный элемент

А вот блочный тег как и при display: table никак не хочет становиться по середине, перемещается лишь его текст
<div style="text-align: center;">
  <div style="width: 50%;">блочный элемент <br /> фиксированной ширины</div>
</div>
блочный элемент
фиксированной ширины

margin: 0 auto;

Свойство margin решает проблему

<div>
  <div style="width: 50%; margin: 0 auto; text-align: center;">блочный элемент <br /> определённой ширины</div>
</div>
блочный элемент
определённой ширины

Чтобы выровнять картинку по центру, нужно прописать, что она стала блочной без указания её width
<img src="URL_изо" style="display: block; margin: 0 auto;"/>
Смайлик

width можно не рассчитывать и при display: table
<div>
  <div style="display: table; margin: 0 auto; text-align: center;">блочная <br /> таблица</div>
</div>
блочная
таблица

float

float не имеет значения center

float: left;
обтекание слева
float: right;
обтекание справа

Для старых браузеров, чтобы выравнять блок, не имеющий фиксированной ширины, можно воспользоваться методом, описанным тут [Студия Артемия Лебедева] http://nocode.in/aligning-text-smartly-in-css/

в f t
наверх ↑

43 комментария:

Анонимный
Спасибо!!!
NMitra
Пожалуйста! С праздниками!
Анонимный
это невероятно, это охуенный сайт, однозначно в закладки!!11одинодин
NMitra
Радостно слышать :)
Анонимный
Спасибо помог!
NMitra
Рада стараться :)
Анонимный
Спасибо, долго не мог решить проблему выравнивания тега div по центру, а здесь я нашел все ответы)
Вячеслав
div по центру... к примеру есть div - center

HTML:
div class="center"
Ваша информация
/div

CSS:
( .center{
width:980px;
height:auto;
margin-left:auto;
margin-right:auto;
float:center;
}

Задаем вопросы на нашем форуме: forum.uss.name
NMitra
И мы неправильно на них ответим. Какой ещё float:center; ??
Елена и Александр Никитины
Здравствуйте!
Подскажите как вот здесь http://www.spo565.ru/2014/03/blog-post_9510.html выровнять каталог, чтобы он одинаково справа и слева вылазил за пределы ширины блога
NMitra
Здравствуйте, попробуйте так

iframe[src^="http://ru.oriflame.com] {
position: relative;
left: -106px;
}

У вас сайт фиксированный, поэтому из ширины каталога нужно вычесть ширины блока с содержанием и поделить на два.
Елена и Александр Никитины
Наталья, вы меня конечно извините, а куда этот код вставить?
NMitra
Это стиль CSS. Добавлять так http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html
Елена и Александр Никитины
Наталья, и первый и второй вариант попробовал, никаких изменений не произошло. Вообще никаких, странно...
Елена и Александр Никитины
Оставил первый вариант: изменения в коде шаблона перед ]]>. http://www.spo565.ru/2014/03/blog-post_9510.html
Елена и Александр Никитины
Перед ]]>
NMitra
Кавычки забыла:

iframe[src^="http://ru.oriflame.com"] {
Елена и Александр Никитины
Наталья, вы-ЭКОНОМИСТ!!! нашего времени и нервов! Спасибо Вам огромное!
...теперь пытаюсь Хлебные крошки победить, вроде ваш материал изучил, но с чего начать и как их запустить...
NMitra
С чего нибудь)) Наверно уже не смогу более подробно объяснить.
Анонимный
Спасибо!
Анонимный
Тема поста: Как выровнять div по центру в HTML
А содержание: выравнивание текста внутри div
NMitra
Вы не правы, div выравнивается по горизонтали. Ему можно задать разные значения свойства display. И поэтому выравнивание зависит в том числе от родителя. Думаю, вам будет интересна эта статья http://shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikali.html

Названием я лишь пытаюсь предугадать как будут искать посетители. Чаще они задают не вопрос "Выравнять блок по горизонтали", а "Как выровнять блок по центру".
Анонимный
Интересно, работает, но не понятен сам механизм: каким образом свойство 'margin: 0 auto' выравнивает блок по ценру? Сможете объяснить?
NMitra
Посмотрите тут http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#m-auto
Если не вразумительно объяснила, обязательно скажите, попробую ещё раз
Анонимный
Посмотрите тут: http://ledcl.ru/info/programs_instr.html Как в самом низу стрелку выровнять по правому краю?
NMitra
.button_up a {
float: right;
}
Анонимный
Спасибо!
Alex
Огромное СПАСИБИЩЕ!!!
NMitra
Благодарю за комментарии! Побольше бы таких!
Леонид Гаврилов
Сиэсэс - это сила!
NMitra
Угу :)
Андрей Лукницкий
Спасибо большое всё получилось.
Анонимный
Здравствуйте!
Такой вопросик.

//div style="width:77%; height:555px; margin:0 auto; border:3px solid red;"\\
//div style="width:100%; height:55px; background-color:green;" \\

//select style="width:177px; float:left; "\\
//option\\lev//option\\
//select\\
//select style="width:177px; float:right; "\\
//option\\prav//option\\
//select\\
//select style="width:177px; display:block; margin:0 auto; overflow: auto; "\\
//option\\seredina//option\\
//select\\

//div\\
//div\\

Всё красиво и хорошо. Но мне надо что-бы при уменьшении экрана. Эти селекторы становились в столбик. Ну ни как не получается. Если можете, подскажите как. Буду очень благодарен.

NMitra
Здравствуйте! Проще всего использовать @Media http://shpargalkablog.ru/2010/12/shirina-saita-css.html
Анонимный
Спасибо Вам.
Я в принципе этим всегда и пользуюсь. Но опять проблема с ИЕ. Там приходится ЯваСкриптом отслеживать. Думал вы сможете подсказать, как это можно реализовать просто, правильно задав стили. Ведь это у Вас получается ну очень хорошо. Ладно, спасибо Вам. Порою ещё.
NMitra
Остальное точно в старых IE не будет работать :)
Анонимный
Благодарю Вас.
Я тут как бы один способ полу нарыл додумал. Как это можно было сделать с таблицей и немного ЯваСкрипт. Но одна проблемка. Ещё подумаю, порою. Если не получится. Можно Вам сюда ещё напишу, может у Вас будет какая мысль?
Пошёл дорывать, думать.
NMitra
Конечно. Только одна просьба: сбрасывайте примеры на https://jsfiddle.net/ Всё равно я потом там смотрю результат
Анонимный
Значит так. В первом варианте работает только. Когда экран фактически имеет такой размер. Потому как, при загрузке страницы считывается размер и через document.wrire(); выводится результат если попало на ИФ.

Вот если есть какой-то способ вместо document.wrire(); как-то иначе отображать. Тогда всё было бы хорошо.

https://jsfiddle.net/81r5ufye/

Поэтому думал и нашёл вроде что-то. Уже казалось СУПЕР. Но проблема что нам надо не открывающий tr и закрывающий tr. А наоборот. закрывающий tr и потом открывающий tr.
Значит не то.
https://jsfiddle.net/znko0w45/

Примерно так. Если будет возможность и желание, гляньте. Может что придумается.

До свидания.
Анонимный
Извините, ещё дополню.
Во втором способе.
Оказывается и простая вставка tr /tr если написана перед загрузкой превращает их в столбик. Но после загрузки. Новый элемент появляется но остальные никак не реагируют.

NMitra
Вопрос возник: @Media не работает на старых IE. А их нет на мобильных. Зачем тогда мучиться?
NMitra
Ммм, вспомнила, что text-align-last: justify; поддерживается на самых древних IE Как раз ваш вариант Для Opera можно применить трюк с :after и :before http://shpargalkablog.ru/2013/07/justify.html
Анонимный
Спасибо Вам огромное. Будет время. Подумаю, посмотрю.
Напишу что получается.