Хостинг от 220 ₽/месяц. Перенос сайтов и месяц на тестирование - бесплатно!

Как выровнять текст по горизонтали и вертикали в блоке div с помощью css

1545
()

Казалось бы, простая задача: выровнять текст по центру блока div. Присваиваем блоку свойство text-align:center и всего делов. Но как быть, если блок объемный и текст необходимо выровнять не только по горизонтали, а еще и вертикали? Конечно, можно задать padding в процентах для решения этой задачи. Но выравнивание в этом случае все - равно будет сбиваться. И тогда на помощь придет чудесные css свойства display:flex, display:table-cell и line-height.

Пример: у нас есть блок div высотой и шириной 200px, в котором необходимо отцентровать текст:

<div class="block">текст</div>

<style>
.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:

<div class="block">текст</div>
<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:

<div class="block">текст</div>
<style>
.block {
width:200px;
height:200px;
border:1px solid;
display:table-cell;
vertical-align:middle;
}
</style>
текст

Вариант 3: Выровнять текст по вертикали и горизонтали можно с помощью свойства line-height. Для этого зададим его равным высоте блока:

<div class="block2">текст</div>
<style>
.block {
width:200px;
height:200px;
border:1px solid;
line-height:200px
}
</style>
текст

На этом все. Надеюсь, что статья была вам полезной!

Продвижение сайтов в Новосибирске

Понравилась статья?

Оцените!

Средняя оценка / 5. Количество оценок:

Оценок пока нет. Поставьте оценку первым!

Добавить комментарий

Ваш адрес email не будет опубликован.

*
code