CSS - свойство высоты строки, как это работает (просто)

Question

Итак, в этот простой пример У меня есть конечный результат:

Это очень простой вопрос, но я просто не могу разобраться с ним.

Чтобы добиться вертикального центрирования чисел, которые я использовал:

line-height:100px;

Что прекрасно работает и делали это методом проб и ошибок.

Мой вопрос, в частности, почему line-height:50px; просто получает, если половина пути.

Если small div имеет высоту 100px и я позиционируюсь относительно него, не должна ли половина его центрировать его на половине.

Это особенно озадачивает меня с тех пор, когда я центрирую div :

Я бы использовал: margin:50px 0 0 50px;, чтобы получить это:

---

Я понимаю, что этот вопрос может быть излишним, поскольку ответ может быть (вероятно, будет очень простым), извините! но я думаю, что лучше вопросы "почему это не работает";)

Заранее спасибо !!

Answer 1

Простой ответ заключается в том, что с высотой строки символ будет в вертикальной середине строки, поэтому строка высотой 100 пикселей имеет текст в середине, то есть 50 пикселей.

Answer 2

Хорошо, я вполне уверен, что получил это сейчас, я отвечу на свой вопрос, благодаря всем вашим ответам, это было бы более графическое объяснение (которое всегда помогает мне):

Это всего лишь дополнение к ответу Джаррета (первым, кто его заколотит ИМХО)

Спасибо за все полезные ответы

Кстати: извинитедля ужасного произведения искусства.

Answer 3

По сути, высота строки помогает установить «ведущий» и «наполовину ведущий». 100px учитывает общую высоту элемента, и текст «выравнивается по вертикали» в этой области. Половина идет выше, а половина ниже.

Это объясняет лучше, чем я. http://www.w3.org/TR/CSS2/visudet.html#line-height

Answer 4

Использование свойства line-height для 100px означает, что текст будет располагаться вертикально по центру в середине строки с высотой 100px.Это означает, что он будет размещен около 50px.Установка полей в 50px даст вам аналогичный результат, но вы можете заметить, что он не точно отцентрирован.

Answer 5

Я думаю, line-height - это как звучит.Это было бы иначе, если бы это была только половина высоты, так как вы должны были бы учитывать font-size и т. Д. line-height просто создает блочную вещь с высотой 100px, в вашем случае, и центрируеттекст в этом.

По существу, line-height добавляет значение ((desired height) - (font-size)) / 2 в верхнюю и нижнюю часть текста, в то время как добавление полей не учитывает это.

Answer 6

Уже ответили, но я подумал, что могу добавить, что формула обычно такова:

Разница между высотой строки и размером шрифта называется Leading.Затем разделите этот «Ведущий» на 2, чтобы получить половину начального значения, которое располагается выше и ниже вашего текста, что приводит к его вертикальному центру.

Следующий набор слайдов многое объяснит о строке-рост.Вы можете начать со слайда 72 для того, что я объяснил выше, но я бы порекомендовал пройти весь набор.

Answer 7

Когда вы задаете для элемента высоту строки 100% (в вашем примере это равно 100 пикселям), текст помещается в середину по вертикали линии высотой 100 пикселей.

Answer 8

Это не работает, потому что высота строки специфична для текста, а не для фактической высоты элементов, таких как div.Я бы предложил использовать высоту, а не высоту строки, если ваша тема на самом деле не является текстом.