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

152

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

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

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

html css text-align

— Хеманшу Бходжак
источник

Дайте нам больше информации, пожалуйста? мимо кода, который не работает в других браузерах.

— Шобан

Вы должны привести пример вашей разметки, чтобы люди знали, что вы пытаетесь сделать. В противном случае ваш вопрос неоднозначен.

— Левик

216

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

Чтобы сделать это, вы хотите, чтобы элемент, который вы хотите выровнять, выровнялся по ширине с 'auto' левым и правым полями. Это совместимый со стандартами способ, который работает везде, кроме 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>

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

— bobince
источник

2

Если вы не знаете ширину div, как это часто бывает, это решение отлично работает во всех браузерах: matthewjamestaylor.com/blog/…

— Артем Руссаковский

Я использовал <div style = "width: 100%; margin: 0 auto;"> Hello </ div>

— Aamol

9

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

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

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

— мессия
источник

9

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

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

— критхи к
источник

1

Хотя этот фрагмент кода может решить вопрос, в том числе объяснение действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос читателей в будущем, и эти люди могут не знать причин, по которым вы предлагаете код.

— Андреас

Извините,

— вышеприведенный код выровняет

6

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

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

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

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

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

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

— Александр
источник

2

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

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

Развернуть фрагмент

— ищейка
источник

2

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

Используя модель флекс-макета :

Установите для отображения родительского display: flex;элемента div значение, и вы можете выровнять дочерние элементы внутри элемента 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>

Развернуть фрагмент

2. (старый метод) Использование позиции, свойств полей и фиксированного размера

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

.parent {
  border: 1px solid black;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  border: 1px solid black;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  position: absolute;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

Развернуть фрагмент

— nmak18
источник

1

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

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

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

Развернуть фрагмент

— никола
источник

-2

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

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

— Диого
источник

27

Ничто из того, что вы написали, не относится к ASP.NET. Это просто HTML и встроенный CSS. Вы имели в виду выписать серверный элемент управления со свойствами?

— веб-червь

1

Исправлена. Ответ теперь упоминает правильные технологии.

— Джони