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

Обновлено: 23 декабря, 2021

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

Код:

<style>
.style1 {
  height: 3em;  /* высота строки*/
  background: #999999; 
}
.style1 img {
  vertical-align: middle; /* выравниваем по центру */
  width: 10%; /* размер картинки */
  margin-right: 10px; /* отступ от картинки
}
</style>
<div class="style1">Текст по центру  <img src="/upload/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>

Пример:

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

(8 оценок, среднее: 5,00 из 5)
Для того чтобы оценить запись, вы должны быть зарегистрированным пользователем сайта.

Загрузка...