Css div текст по центру вертикали css: HTML/CSS: как центрировать по вертикали

Вертикальное выравнивание текста в блоке (child-helper)

07.12.2016

6194

В закладки

Старый метод «child-helper» для выравнивания текста по вертикали в блоках с фиксированной высотой.

Текст обворачивается в тег с классом .child, а за ним добавляется пустой тег с классом .helper.

<div><span>Текст который нужно выровнять</span><span></span></div>

HTML

Важно чтобы между тегами не было пробелов и переносов строк, как показано в примере:

CSS стили для span:

/* Вертикальное выравнивание */
.child {
	display: inline-block;
	vertical-align: middle;
	zoom: 1;
}
.helper {
	display: inline-block;
	vertical-align: middle;
	height: 100%;
	width: 0px;
	zoom: 1;
}

CSS

<div>
	<div><span>Быстрая доставка</span><span></span></div>
	<div><span>Скидки клиентам, сезонные акции</span><span></span></div>
	<div><span>Большой ассортимент товаров на любой кошелек</span><span></span></div>
	<div><span>Гарантия от 1 года</span><span></span></div>
</div>

HTML

. list {
	overflow: hidden;
}
.list div {
	width: 21%;
	float: left;
	margin: 0 2%;
	height: 90px;
	text-align: center;
	background: #eee;
	line-height: 18px;
}

/* Вертикальное выравнивание */
.child {
	display: inline-block;
	vertical-align: middle;
	zoom: 1;
}
.helper {
	display: inline-block;
	vertical-align: middle;
	height: 100%;
	width: 0px;
	zoom: 1;
}

CSS

Результат:

<div>
	<div><a href="#">Быстрая доставка</a><span></span></div>
	<div><a href="#">Скидки клиентам, сезонные акции</a><span></span></div>
	<div><a href="#">Большой ассортимент товаров на любой кошелек</a><span></span></div>
	<div><a href="#">Гарантия от 1 года</a><span></span></div>
</div>

HTML

CSS:

. list {
	overflow: hidden;
}
.list div {
	width: 21%;
	float: left;
	margin: 0 2%;
	height: 90px;
	text-align: center;
	background: #eee;
	line-height: 18px;
}

/* Вертикальное выравнивание */
.child {
	display: inline-block;
	vertical-align: middle;
	zoom: 1;
}
.helper {
	display: inline-block;
	vertical-align: middle;
	height: 100%;
	width: 0px;
	zoom: 1;
}

CSS

Результат:

07.12.2016, обновлено 29.07.2022

6194

#CSS #HTML

В закладки

Другие публикации

Как отключить тег br

Зачастую в мобильных версиях сайта перенос текста тегом br только мешает, исключить его влияние можно несколькими способами.

Как скрыть лишний текст в блоке

Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.

Текст в две колонки

Несколько примеров, как вывести текст в две колонки одинаковой ширины и отступом между ними.

Contenteditable – текстовый редактор

Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а…

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

22 Янв/22

1199

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

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

<div>текст</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>текст</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>текст</div>
<style>
.block {
width:200px;
height:200px;
border:1px solid;
display:table-cell;
vertical-align:middle;
}
</style>

текст

Вариант 3: Выровнять текст по вертикали и горизонтали можно с помощью свойства

line-height. Для этого зададим его равным высоте блока:

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

текст

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

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

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

Оцените!

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

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

Категории: css, html

Похожие записи :

28 Окт

Если у вас есть компания/фирма/организация и ее профиль в Яндексе с…

html, Разное Читать дальше

14 Авг

Наверняка каждый, кто начинал изучать html и php, сталкивался с тем, что при. ..

html, php Читать дальше

12 Авг

Чтобы задать размер шрифта на сайте с помощью css, необходимо у нужного…

css Читать дальше

14 Авг

Всем привет. На связи coderistu.ru. В этой статье мы рассмотрим, как сделать…

css, html Читать дальше

02 Авг

Всем привет. На связи coderistu.ru В одной из своих статей я писал, как сделать…

css, html Читать дальше

Как центрировать текст и элементы HTML по вертикали с помощью CSS

Центрировать что-либо по вертикали в CSS не так просто, как вы думаете, и пока у нас не появились такие инструменты, как flexbox , это было действительно сложно. К счастью, вертикально центрировать что-либо внутри контейнера теперь довольно просто. Давайте посмотрим, как это сделать.

Вертикальное центрирование элемента в CSS

Предположим, у нас есть простой HTML с div с именем .item внутри контейнера с именем #контейнер . Наш HTML выглядит так:

 

    <дел>
        Привет
    

 #контейнер {
    дисплей: гибкий;
    выравнивание элементов: по центру;
}
 

 #container {
    дисплей: гибкий;
    выравнивание элементов: по центру;
    выравнивание содержимого: по центру;
}
 

 

    <дел>
        Привет