Если вы попытаетесь выровнять текст по вертикали по центру внутри div, используя CSS-правило vertical-align: middle;, оно у вас не сработает. Предположим, у вас есть элемент div высотой 50px, и вы поместили в него ссылку, которую хотите выровнять по вертикали по центру. Самый простой способ сделать это — просто применить свойство line-height со значением, равным высоте div, которое составляет 50px.
Суть этого трюка заключается в том, что если значение свойства line-height больше, чем значение font-size для элемента, разница (так называемая «ведущая») уменьшается вдвое и равномерно распределяется сверху и снизу встроенного блока, который выравнивает встроенные элементы по вертикали по центру элемента.
Посмотрим следующий пример, чтобы понять, как это работает:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vertically Center Text Using CSS</title>
<style>
.menu{
height: 20px;
line-height: 20px;
padding: 15px;
border: 1px solid #666;
}
</style>
</head>
<body>
<div class="menu">
<a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Contact</a>
</div>
</body>
</html>
