#box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #FFF; text-align: center; }<div id="box"> Lorem ipsum dolor sit </div>
Как лучше всего достичь этой цели?
Вы можете попробовать этот базовый подход:
div { height: 100px; line-height: 100px; text-align: center; border: 2px dashed #f69c55; } <div> Hello World! </div>
Однако это работает только для одной строки текста, поскольку мы устанавливаем высоту строки на ту же высоту, что и содержащий ее элемент поля.
Более универсальный подход
Это еще один способ выровнять текст по вертикали. Это решение будет работать для одной строки и нескольких строк текста, но для него по-прежнему требуется контейнер фиксированной высоты:
div { height: 100px; line-height: 100px; text-align: center; border: 2px dashed #f69c55; } span { display: inline-block; vertical-align: middle; line-height: normal; }<div> <span>Hello World!</span> </div>
CSS просто изменяет размер <div>, вертикально по центру выравнивает установив
Этот метод использует абсолютно позиционированный элемент, устанавливающий значение 0 сверху, снизу, слева и справа.
div { display: flex; justify-content: center; align-items: center; height: 100px; width: 100%; border: 2px dashed #f69c55; } <div><span>Hello World!</span> </div>
Мне нужен был ряд интерактивных слонов, вертикально центрированных, но без использования таблицы, чтобы обойти некоторые странности Internet Explorer 9.
В конце концов я нашел лучший CSS (для своих нужд), и он отлично работает с Firefox, Chrome и Internet Explorer 11. К сожалению, Internet Explorer 9 все еще смеется надо мной…
div { border: 1px dotted blue; display: inline; line-height: 100px; height: 100px; } span { border: 1px solid red; display: inline-block; line-height: normal; vertical-align: middle; } .out { border: 3px solid silver; display: inline-block; }<div class="out" onclick="alert(1)"> <div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div> <div> <span>A lovely clickable option.</span> </div> </div> <div class="out" onclick="alert(2)"> <div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div> <div> <span>Something charming to click on.</span> </div> </div>