Я использую CSS-стиль text-align для выравнивания содержимого внутри контейнера в HTML. Это прекрасно работает, пока контент является текстовым или браузером является IE. Но в противном случае это не сработает.
Также, как видно из названия, оно используется в основном для выравнивания текста. Свойство align было устарело долгое время.
Есть ли другой способ выровнять содержимое в html?
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>
(Очевидно, что стили лучше всего помещать внутри таблицы стилей, но встроенная версия является иллюстративной.)
Вы также можете сделать это так:
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%; }
Как упоминал и Артем Руссаковский, прочитайте оригинальную статью Мэтью Джеймса Тейлора для полного описания.
<div class="content">Hello</div>
.content {
margin-top:auto;
margin-bottom:auto;
text-align:center;
}
Честно говоря, я ненавижу все решения, которые я видел до сих пор, и я скажу вам, почему: они просто не кажутся подходящими... так вот что я обычно делаю:
Я знаю, какие значения пикселей каждого div и их соответствующие поля сохраняются... поэтому я делаю следующее.
Я создам обертку div, которая имеет абсолютную позицию, а левое значение - 50%... поэтому этот div теперь начинается в середине экрана, а затем я вычитаю половину всего содержимого ширины div... и я получаю КРАСИВОЕ масштабирование контента... и я думаю, что это работает и во всех браузерах. Попробуйте это для себя (в этом примере предполагается, что весь контент на вашем сайте завернут в тег div, который использует этот класс-оболочку, и все содержимое в нем составляет 200 пикселей в ширину):
.wrapper {
position: absolute;
left: 50%;
margin-left: -100px;
}
EDIT: я забыл добавить... вы также можете задать ширину: 0px; на этой оболочке div для некоторых браузеров не показывать полосы прокрутки, а затем вы можете использовать абсолютное позиционирование для всех внутренних div.
Это также работает AMAZING для вертикального выравнивания вашего контента, а также сверху: 50% и margin-top. Ура!
Вот техника, которую я использую, сработала хорошо:
<div>
<div style="display: table-cell; width: 100%"> </div>
<div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>Все ответы говорят о горизонтальном выравнивании.
Чтобы выровнять несколько элементов по вертикали, взгляните на этот подход:
<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>Ниже приведены методы, которые всегда помогли мне
Установите для отображения родительского элемента 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>Еще один пример использования HTML и CSS:
<div style="width: Auto; margin: 0 auto;">Hello</div>