Выровнять содержимое внутри div - PullRequest
Новая
       14

Выровнять содержимое внутри div

140 голосов
/ 26 марта 2009

Я использую CSS-стиль text-align для выравнивания содержимого внутри контейнера в HTML. Это прекрасно работает, когда содержимое текстовое или браузер IE. Но в противном случае это не работает.

Также, как следует из названия, он используется в основном для выравнивания текста. Свойство align давно устарело.

Есть ли другой способ выровнять содержимое в html?

Ответы [ 7 ]

205 голосов
/ 26 марта 2009

text-align выравнивает текст и другой встроенный контент. Он не выравнивает дочерние элементы блока.

Для этого вы хотите, чтобы элемент выровнялся по ширине с «авто» левым и правым полями. Это совместимый со стандартами способ, который работает везде, кроме IE5.x. 

<div style="width: 50%; margin: 0 auto;">Hello</div>

Чтобы это работало в IE6, необходимо убедиться, что Стандартный режим включен, используя подходящий DOCTYPE.

Если вам действительно нужно поддерживать режим IE5 / Quirks, который в настоящее время вам не нужен, возможно объединить два разных подхода к центрированию: 

<div style="text-align: center">
    <div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>

(Очевидно, что стили лучше всего помещать в таблицу стилей, но встроенная версия является иллюстративной.)

8 голосов
/ 22 декабря 2012

Вы можете сделать это так же:

HTML 

<body>
    <div id="wrapper_1">
        <div id="container_1"></div>
    </div>
</body>

CSS 

body { width: 100%; margin: 0; padding: 0; overflow: hidden; }

#wrapper_1 { clear: left; float: left; position: relative; left: 50%; }

#container_1 { display: block; float: left; position: relative; right: 50%; }

Как упомянуто также Артем Руссаковский , прочтите оригинальную статью Мэтью Джеймс Тейлор для полного описания.

7 голосов
/ 27 октября 2016 
<div class="content">Hello</div>

.content {
    margin-top:auto;
    margin-bottom:auto;
    text-align:center;
}
6 голосов
/ 04 августа 2013

Честно говоря, я ненавижу все решения, которые я видел до сих пор, и я скажу вам почему: они просто, кажется, никогда не выровняли это правильно ... вот что я обычно делаю:

Я знаю, какие значения пикселей у каждого элемента div и их соответствующие поля ... так что я делаю следующее.

Я создам div-обертку, которая имеет абсолютную позицию и левое значение 50% ... так что теперь этот div начинается в середине экрана, а затем я вычитаю половину всего содержимого ширины div ... и я получаю КРАСИВОЕ масштабирование контента ... и я думаю, что это работает во всех браузерах. Попробуйте сами (в этом примере предполагается, что весь контент на вашем сайте обернут в тег div, который использует этот класс-оболочку, а весь контент в нем имеет ширину 200 пикселей): 

.wrapper {
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

РЕДАКТИРОВАТЬ: я забыл добавить ... вы также можете установить ширину: 0px; В этом браузере div для некоторых браузеров не отображать полосы прокрутки, и тогда вы можете использовать абсолютное позиционирование для всех внутренних div.

Это также работает ИЗУМИТЕЛЬНО для вертикального выравнивания вашего контента, используя top: 50% и margin-top. Ура!

2 голосов
/ 11 июня 2015

Вот техника, которую я использую, которая хорошо зарекомендовала себя: 

<div>
    <div style="display: table-cell; width: 100%">&nbsp;</div>
    <div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>
1 голос
/ 10 ноября 2018

Все ответы говорят о горизонтальном выравнивании.

Для вертикального выравнивания нескольких элементов контента, взгляните на этот подход: 

<div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
    <div>
        <p>Paragraph #1</p>
        <p>Paragraph #2</p>
    </div>
</div>
0 голосов
/ 17 августа 2012

Еще один пример использования HTML и CSS: 

<div style="width: Auto; margin: 0 auto;">Hello</div>
...