2

Есть такой код:

html:

<p class="hst">Шаблон</p>

css:

.hst {
    height: 50px;
    text-align: center;
    border: 1px solid green;
}

Получается так, что текст наверху рамки, а остальная часть рамки пусто. введите сюда описание изображения

Как отцентрировать текст по вертикали (не меняя код выше)?

3
  • Дабавьте line-height: 50px 20 апр 2016 в 16:38
  • я боюсь спросить: что значит не меняя код выше?
    – sivik_xes
    20 апр 2016 в 16:42
  • т.е. ничего не удалять, а продолжить, добавить код
    – Ilnyr
    20 апр 2016 в 16:46

2 ответа 2

3

Используйте display: table-cell (разрешить центрирование) в связке с vertical-align: middle (выполнить центрирование):

.hst {
    display: table-cell;
    vertical-align: middle;

    width: 400px;
    height: 40px;
    text-align: center;
    border: 3px solid green;
    border-radius: 30px;
}
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <p class="hst">Шаблон</p>
</body>
</html>

3

Добавьте line-height: 50px; - тогда высота строки станет равной высоте вашего блока (height: 50px;) и текст отцентрируется:

.hst {
    height: 50px;
    text-align: center;
    border: 1px solid green;
    line-height: 50px;
}
<p class="hst">Шаблон</p>

Ваш ответ

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

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