2

Необходимо расположить текст по центру блока (текст в одну строку). Решил использовать line-height равный высоте блока, но высота блока помимо того что она имеет дефолтное значение, еще и динамическая. Подскажите, как можно вставить высоту блока в параметр line-height? Возможно, для этого есть какие-то функции или миксины для sass?

5
  • Вопрос, скорее, должен называться "Как расположить текст по вертикальному центру блока?". Line-height тут ни при чем.
    – labris
    9 мар 2017 в 14:54
  • @labris, нормальный заголовок у него. Заголовки разные нужны.
    – Qwertiy
    9 мар 2017 в 15:31
  • @labris Есть масса способов достигнуть этой цели (падингами, абсолютным позиционированием и т.д.) но я выбрал для себя этот и поставил четкий вопрос, поэтому не вижу смысла в вашем замечании. 9 мар 2017 в 15:33
  • Это как "вам шашечки или ехать?" Нужно решение или нужен line-height?
    – labris
    9 мар 2017 в 15:43
  • @labris Хотите считать свое мнение верным? - считайте, но зачем навязывать его другим. 9 мар 2017 в 15:47

2 ответа 2

3

html, body {
  height: 100%;
  margin: 0;
  vertical-align: middle;
}

body::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
Just some text

1
1

div{
    height: 50px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;    
}
div:nth-of-type(2){
    height: 100px;
}
div:nth-of-type(3){
    height: 150px;
}
<div>text-middle</div>
<div>text-middle</div>
<div>text-middle</div>

2
  • Интересный вариант. Хотя насчёт рациональности не уверен :)
    – Qwertiy
    9 мар 2017 в 15:30
  • Flex это конечно хорошо, но если бы я его использовал то не задумывался над этим вопросом. 9 мар 2017 в 15:30

Ваш ответ

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

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