Казалось бы, простая задача: выровнять текст по центру блока div. Присваиваем блоку свойство text-align:center и всего делов. Но как быть, если блок объемный и текст необходимо выровнять не только по горизонтали, а еще и вертикали? Конечно, можно задать padding в процентах для решения этой задачи. Но выравнивание в этом случае все - равно будет сбиваться. И тогда на помощь придет чудесные css свойства display:flex, display:table-cell и line-height.
Пример: у нас есть блок div высотой и шириной 200px, в котором необходимо отцентровать текст:
.block {
width:200px;
height:200px;
border:1px solid;
text-align:center;
}
</style>
Если присвоить ему css свойство text-align:center, то текст выровняется только по горизонтали:
Вариант 1: Для того, чтобы текст в блоке выровнялся как по горизонтали, так и по вертикали, блоку необходимо добавить css свойства display:flex, align-items: center и justify-content: center:
<style>
.block {
width:200px;
height:200px;
border:1px solid;
text-align:center;
display:flex;
align-items: center;
justify-content: center
}
</style>
Вариант 2: Используем свойства display:table-cell и vertical-align:middle:
<style>
.block {
width:200px;
height:200px;
border:1px solid;
display:table-cell;
vertical-align:middle;
}
</style>
Вариант 3: Выровнять текст по вертикали и горизонтали можно с помощью свойства line-height. Для этого зададим его равным высоте блока:
<style>
.block {
width:200px;
height:200px;
border:1px solid;
line-height:200px
}
</style>
На этом все. Надеюсь, что статья была вам полезной!
