Доброго дня.
<body>
<div class="paginator">
<a href="#prev">Назад</a>
<a href="#1">1</a>
<span>…</span>
<a href="#3">3</a>
<a href="#next">Вперёд</a>
</div>
</body>
CSS
.paginator {
width: 280px;
margin: 30px auto;
padding: 10px;
white-space: nowrap;
background: #ecf0f1;
}
.paginator a,
.paginator span {
display: inline-block;
min-width: 20px;
height: 40px;
padding: 0 10px;
background: #95a5a6;
text-align: center;
vertical-align: middle;
line-height: 40px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
Хоть убейте, не могу понять, для чего здесь задается vertical-align: middle
? Блок .paginator не имеет своих размеров, спанам и ссылкам внутри мы задаем одинаковую высоту, для чего еще дополнительно выравнивать их по вертикали? Если убрать vertical-align, ничего не меняется. Текст внутри ссылок и спанов мы центруем с помощью line-height.