Выравнивание в css?

Question

[Глеб Жуков]

Я знаю только выравнивание внутри body с помощью margin: 0 auto . Но это не работает если элемент находится внутри другого элемента. Как быть в таком случае ? Есть ли возможность выравнять вложенный элемент ?

Answer 1

[iBird Rose]

ну тк margin: 0 auto; и на вложенные сработает.
а вообще можно сделать этот элемент inline-block; и сделать родителю text-align: center;

Answer 2

[Сергей ZSA]

Есть как минимум 5 способов выравнивания по центру:
1. margin: 0 auto; для элемента, у которого есть display: block; ну или блочность по-умолчанию
2. У элемента, в который вложен другой элемент поставить text-align: center; тогда элемент внутри будет по центру (если он не блочный, а к примеру строчно-блочный или строчный)
3. Для любого блока абсолютное позиционирование, left: 50%; transform: translate(-50%, 0); если хотите чтоб не от body считалось - сделайте relative для блока родителя.
4. justify-content: center; для flex
5. При помощи padding для блока-родителя (это уже изврат, но тоже можно и надо, чтоб внутренний блок тянулся на всю доступную ширину)
6. Способ похож на абсолютное, но не transform а margin-left: -(ширина в px элемента, который позиционируют), давно этот способ не использую, проще transform.

По-моему есть ещё, но чет уже забыл. Выбирайте тот способ, который вам нужен. Не знаете как пользоваться тем или иным - читайте тот же htmlbook.

Answer 3

[ukoHka]

Это работает с любым блочным элементом.

Answer 4

[ummahusla]

Можно код сниппет на jsfiddle/jsbin

Если я правильно понял ваш вопрос, то вы можете добавить width: 100% ту даже где и margin: 0 auto, и оно должно работать.