1

Здравствуйте. Подскажите, как выровнять текст внутри элемента span?
Т.е. по вертикали выравнивает, а по горизонтали нет.

   <html>
      <body>
        <span style="background-color: red;
                     color: white;
                     padding: 6px;
                     position: absolute;
                 text-align: center;
                     width: 195px;
                     height: 120px;
             top: 0;
                     left: 0;
                     bottom: 0;
             right: 0;
                     margin: auto;">ВНИМАНИЕ!</span>
      </body>
    </html>

alt text

2 ответа 2

1

Попробуйте задать line-height: 120px; и убрать padding: 6px;

2
  • Спасибо. А что означает line-height? Прочитал, что устанавливает интерлиньяж, но не понимаю, что это.
    – compl
    23 сен 2014 в 15:41
  • Это междустрочный интервал. Я так часто выравниваю текст внутри блоков, если он написан в одну строку. У вас высота красного блока равна 120px, и мы установили такой же интерлиньяж. Т.е. текст думает, что его интервал такой же, как и наш блок, соответственно, оказывается по центру. 23 сен 2014 в 15:44
0

Это, конечно, тоже хороший вариант, возьму на заметку. А можно еще сделать и так:

.class{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 200px;
height: 200px;
border: 1px solid black;
}

И теперь можете какой угодно текст вставить, центрирование будет постоянно в центре)

Ваш ответ

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

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