Почему не центрируется элемент с margin: auto?

Question

[dhat]

Ребят, хочу окончательно разобраться с этим вопросом. Т.е. спрашиваю без практического применения данного примера, а для себя. Интересует теория. Прошу помочь нубу.

Вообщем, почему в данном случае не центрируется элемент span внутри a? Я сделал a блочным элементом. Применил к span margin: auto. В чем проблема-то?

codepen.io/dhatt/pen/xExkxQ?editors=1100

Answer 1

[Сергей delphinpro]

Центрирование в CSS: полное руководство

Прочитайте эту статью. И вы будете знать, как отцентрировать в любом направлении любой блок, с любыми параметрами (в пределах возможного, конечно) =)

Comments

[dhat]

А если везде где только можно использовать флексбокс - это сильно сказывается на производительности? (поддержка браузерами не волнует)

[dhat]

Кстати, спасибо, хорошая статья, прям про меня))

[dhat]

MaxKorz: спасибо, приму к сведению

Answer 2

[dhat]

Кажется я понял - для дочернего элемента нужно обязательно указывать ширину, верно? Ок, тогда второй вопрос - а если я не знаю какой width указывать? Auto не работает.

Comments

[V Sh.]

да, иначе он растянется на всю ширину, насколько я помню...

[Виталий Сазанов]

Верно. margin: 0 auto работает только когда известна максимальная ширина элемента. Можно указать width или max-width.

[dhat]

Виталий Сазанов: А если я не знаю какой width? Если он будет постоянно менятся в разных частях сайта???

[Виталий Сазанов]

dhat: Тебе надо, чтобы текст был просто посередине? Тогда text-align: center

[dhat]

Виталий Сазанов: Нет, не надо чтоб посередине, это я знаю, как текст элайн сделать. А как сделать чтоб width вокруг span был тютелька в тютельку как будто auto?

[dhat]

В принципе, методом тыка нашел такой хак - поставить width: 1px. Тогда будет ровно по центру и без text-align. Но насколько это хорошая практика?

[Виталий Сазанов]

dhat: он уже тютелька в тютельку - растянут на всю ширину родительского элемента. раскрась span и увидишь codepen.io/anon/pen/XjWXKP?editors=1100 :) а текст виден слева, потому что по умолчанию text-align: left.

[dhat]

Виталий Сазанов: мне надо тютелька в тютельку ВОКРУГ текста span, естественно, а не во всю ширину страницы. Думал это понятно.

[dhat]

Я смотрел без раскраски в DevTools

[Юрий Елманов]

Попробуй задать max-width, ибо я думаю твой сайт будет иметь максимальную ширину, от этого и пляши

[Виталий Сазанов]

dhat: inline-block в помощь codepen.io/anon/pen/XjWXKP?editors=1100

[Сергей delphinpro]

dhat:

a {
  text-decoration: none;
  font-weight: bold;
  background: pink;
/*   width: 100%; */
  display: flex;
  justify-content: center;
}
span {}

[dhat]

Виталий Сазанов: о, спс, вот это уже интересно становится. Я не подозревал о такой разнице между block и inline-block. Ужас, такие простые вещи - и так запутано.

[dhat]

А если везде где только можно использовать флексбокс? Это будет влиять на производительность? (поддержка не особо интересует)

[dhat]

Сергей: ок, а если везде флексбокс использовать, даже в таких мелочах - это на производительности не отражается? Я думал флексбокс лучше для основной разметки сайта...

[Сергей delphinpro]

dhat: Для основной разметки как раз и не стоит, имхо. Нужно внимательно следить за распределением пространства, иногда это гемморно. Для основной раскладки ждем гриды =)
А вот для мелочей - флексы самое то. Отцентрировать, распределить иконки равномерно, пересортировать блоки для мобильных устройств, и т.п. К тому в таких случаях, как правило без проблем прописываются фоллбеки на инлайн-блоках или таблицах для стареньких осликов до 9 версии.

[Сергей delphinpro]

dhat:

Я не подозревал о такой разнице между block и inline-block.

Ну тогда порекомендую еще одну наиполезнейшую весчь для чтения. Основы надо знать.

[dhat]

Сергей: спасибо вам за информацию.