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

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

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

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

Ответы

Ответ 1

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>

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

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

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

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

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

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

Это также работает AMAZING для вертикального выравнивания вашего контента, а также сверху: 50% и margin-top. Ура!

Ответ 5

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

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

Ответ 6

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

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

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

Ответ 7

Ниже приведены методы, которые всегда помогли мне

  1. С помощью гибкой модели макета:

Установите для отображения родительского элемента div значение display: flex;, и вы можете выровнять дочерние элементы внутри элемента div, используя justify-content: center; (для выравнивания элементов по главной оси) и align-items: center; (для выравнивания элементов по поперечной оси).

Если у вас есть несколько дочерних элементов и вы хотите управлять их расположением (столбцы/строки), вы также можете добавить свойство flex-direction.

Рабочий пример:

.parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  height: 250px;
  width: 250px;
}

.child {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}
<div class="parent">
  <div class="child"></div>
</div>

Ответ 8

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

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