0

Почему данный код не выравнивает текст по центру?

html, body {
  height: 100%;
}

.block{
  width: 20%;
  height: 100%;
  max-width: 20%;
  max-height: 50%;
  background: greenyellow;
  border-radius: 10px;
  margin-top: 50px;
  margin-left: 100px;
}

.block h4 {
  margin: auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="block">
    <h4> 
        abacaba
    </h4>
</div>
</body>
</html>

4
  • А в каком месте вы его выравниваете? :) 17 мар 2016 в 19:27
  • @IgorTkachuk .block h4 {margin: auto}
    – Юрий
    17 мар 2016 в 19:34
  • 3
    margin: auto работает только тогда, когда задана ширина для элемента. В данном случаи ширина тега h4 равна 100% от ширины родителя и margin не может его отцентровать! 17 мар 2016 в 19:43
  • @IgorTkachuk спасибо!
    – Юрий
    17 мар 2016 в 19:59

4 ответа 4

2

margin: auto; - выравнивает блок за счёт добавление отступов по краям, но так-как ваш блок на всю ширину, то отступы не добавляются, им просто не где быть.
введите сюда описание изображения
Видно что блок во всю ширину и отступов нету.
Вариант 1
Всё таки выравнивать блок h1, задать ему не полную ширину.
введите сюда описание изображения
Ширина 75px и видны отступы и блок по центру, но не текст.
Вариант 2
Выравнивать сам текст внутри h1: text-align: center - выравнивает текст в блоке h1, а не сам блок.
введите сюда описание изображения
Блок во всю ширину, но текст по центру.

1

margin: auto; не работает потому что элемент h4 занимает всю ширину блока .block и ей как-бы негде ставить отступ.
Если попробуйте задавать элементу h4 например width:60px; то он выравнивается по центру блока .block.

0

Напиши : text-align:center; в .block

2
  • Работает, но все же непонятно, почему margin: auto не работает
    – Юрий
    17 мар 2016 в 19:35
  • Постарайтесь писать более развернутые ответы. Поясните, на чем основано ваше утверждение? 18 мар 2016 в 6:25
0

Потому что H4 это блочный элемент и он занимает всю ширину родительского документа.

Чем не устраивает простой:

h4 { text-align: center; }

Ну или если обязательно нужны margin'ы, то можно так:

h4 { display: table; margin: 0 auto; }

Можете посмотреть руководство по выравниванию в CSS.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.