CSS - Как я могу центрировать div внутри div?

Question

У меня есть внешний div, ширина которого составляет 800 пикселей. У меня есть внутренний div, который может быть где угодно от 200 до 600 пикселей в ширину.

Я знаю, как центрировать внутренний div внутри внешнего, если я устанавливаю внутренний для определенной ширины, но как мне центрировать его, так как он имеет переменную ширину?

Есть ли способ установить div только шириной элементов внутри него, вместо того, чтобы расширять его, чтобы заполнить содержащийся div?

Answer 1

Плавающее, отображение: встроенный блок или абсолютное позиционирование сжимают div. Из них display: inline-block будет проще всего центрировать с помощью простого text-align: center. Если вам нужно поддерживать дрянные браузеры (я уверен, что вы это делаете), проверьте это .

Предполагая, что вы по-прежнему не поддерживает FF2, вы можете покончить с большинством хаков и по-прежнему поддерживать старые IE, сделав вместо этого внутренний div span display: inline-block работает в более старом IE, если элемент изначально был встроенным.

Answer 2

Вам нужно будет установить ширину внутренней div, иначе она неявно займет всю ширину внешней div. Если вы имеете в виду «динамическую ширину», как в «плавающем», будет очень сложно отцентрировать ее.

Итак, если вы установите ширину на div, просто добавьте этот стиль:

.centeredDiv {
    width: 400px;
    margin: 0 auto;  // auto left/right margin will center it
}

Answer 3

Ненависть к таблицам - это все в моде в наши дни, но я считаю, что использование таблицы с ячейками, установленными в процентах ширины, решает эту проблему чисто (и является кросс-браузерной):

<table>
  <tr>
    <td width="50%"></td>
    <td>centered content</td>
    <td width="50%"></td>
  </tr>
</table>

Answer 4

Вы можете создать три класса css с соответствующим полем, чтобы div был в центре и применял эти классы на основе ширины внутреннего div.

Answer 5

Вы можете динамически устанавливать координаты X и Y для innerDIV, всякий раз, когда вы хотите изменить выравнивание innerDIV. EG:

innerDIV.style.left = (outerDIV.style.width-innerDIV.style.width) / 2

innerDIV.style.top = (outerDIV.style.height-innerDIV.style.height) / 2

где innerDIV - это стиль, установленный на position:relative