Выравнивание содержимого внутри div

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

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

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

135
css html text-align

6 ответов

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>

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

196

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

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

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

8

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

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

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

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

EDIT: я забыл добавить...вы также можете установить width: 0px; на этой оболочке div для некоторых браузеров, чтобы не показывать полосы прокрутки, а затем вы можете использовать абсолютное позиционирование для всех внутренних divs.

Это также работает потрясающе для вертикального выравнивания контента, а также с помощью top: 50% и margin-top. Ура!

5
<div class="content">Hello</div>

.content {
    margin-top:auto;
    margin-bottom:auto;
    text-align:center;
}
4

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

<div>
    <div style="display: table-cell; width: 100%">&nbsp;</div>
    <div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>
2

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

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