Как выравнять строчно-блочый заголовок по центру страницы?

Question

[Александр]

привет
Как выравнять этот заголовок по центру? Сделал его инлайн-блок специально, чтобы бордер-баттом (нижнее подчеркивание не было на всю сроку, а только под самим текстом). Но теперь не применяется ни текст элайн центре ни маржин авто.
https://codepen.io/AlexandrDevZ/pen/YMzovY

Comments

[Rustam Bainazarov]

Всё применяется. Смотрите инспектор. Строчно-блочный элемент по ширине подгоняется под контент. Убирайте вашу строчно-блочность, оьорочаивайте текст внутри h1 в span, делайте подчеркивание у span, а не у h1.

Либо делайте обёртку h1 и у неё уже text-align: center.

[Александр]

А почему если не оборачивать h1 в д
дополнительный див нельзя его по центру выравнять? Строчно блочные что-ди сам по себе не выравниваются?

[Rustam Bainazarov]

https://codepen.io/anon/pen/LvEPbK

[Rustam Bainazarov]

Александр, а почему они должны выравниваться сами по себе? Он встроен в строку и ведёт себя как строчный элемент, т. е. заполняет ровно столько пространства, сколько нужно ему.

А margin: auto работает только с block и table. Хак ниже с table — слишком весёлая практика, чтобы её применять, на мой взгляд.

[Александр]

Рустам Байназаров, в первый раз такое вижу, display : table

[Rustam Bainazarov]

Александр, эм, это… таблица.

Answer 1

[leni_m]

блоку родителю задайте: text-align: center;

Comments

[Александр]

те обязательно нужен блок для начала, в котором собственно будет находится заголовок и относительно которого выравниваться?

[leni_m]

нет, это один из способов. text-align выравнивает текст внутри блока, и если в этом блоке будет inline-block, то к нему тоже будет применяться выравнивание.

Answer 2

[kupurim]

h1
  border-bottom: 1px solid red
  display: table
  margin: 0 auto

Comments

[Одиночка Айс]

Зачем тут таблица?

[Rustam Bainazarov]

Одиночка Айс, она позволит использовать margin: 0 auto, при этом блок будет иметь размеры содержимого. Это старый хак.

[Одиночка Айс]

Рустам Байназаров, это понятно, но почему именно устаревшая таблица, а не `disaply:block;`?

[Rustam Bainazarov]

Одиночка Айс, вы упускаете важную деталь. Рамка внизу h1 ровно по размеру текста. В силу своих особенностей, table позволяет это сделать. H1 ведь и так блочный элемент, поэтому рамка внизу будет по всей ширине элемента.

Ну и более того, таблицы никогда не устаревали, устаревали методы их практического применения.