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

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

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

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

6 135
html css text-alignment

6 ответов:

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

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

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

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

Если вам действительно нужно поддерживать режим 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%; }

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

8

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

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

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

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

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

Это также работает удивительно для вертикального выравнивания вашего контента также используется 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