Выравниваем блоки, текст, картинки с помощью CSS

Выравниваем текст по центру картинки

Код:

<style>
.style1 {
  height: 3em;  /* высота строки*/
  background: #999999;
}
.style1 img {
  vertical-align: middle; /* выравниваем по центру */
  width: 10%; /* размер картинки */
  margin-right: 10px; /* отступ от картинки */
}
</style>
<div class="style1">Текст по центру  <img src="/wp-content/uploads/2018/12/logo.png" />  (по вертикали) картинки </div>

Пример:

Текст по центру(по вертикали) картинки

Текст в центре блока

Код:

<style>
.style2{
	background: #777777;
	padding: 3em 0;
	color:white;
	text-align: center; /* выровнять текст и картинки по горизонтали */
}
</style>
<div class="style2">Текст  в центре блока</div>

Пример:

Текст в центре блока

Текст в блоках

Код:

<style>
.style3 {
	display: table;
	width: 100%;
	height: 7em; /* работает также как min-height, то есть будет растягиваться пока не поместится всё содержимое */
	text-align: center; background: #fff5d7;
}

.style3 div {
	/* для IE8+ */ display: table-cell; vertical-align: middle;
}

.style3 div:nth-child(2) {
	/* не менее высоты родителя */ background: #9F9;
} </style>
<div class="style3"> <div>1-ый блок</div> <div>2-ой блок<br>2-ой блок</div> <div>3-ий блок</div> </div>

Пример:

Демо данных примеров можно посмотреть и скачать здесь

Демонстрация по исходной ссылке показывает исторический вариант примера.

Проверенные источники

developer.mozilla.org, developer.mozilla.org. Проверено 10 октября 2026 года.