Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги:

Категории

Рубрики

Разработка сайтов под ключ. Работаем с такими системами, как Worpress, 1C-Bitrix, Tilda. Закажите разработку в Lion Digital и получите по настоящему продающий сайт.

от 32900 

Услуги веб дизайна под ключ.

от 29500 

Услуги SEO копирайтера под ключ. Пишем качественные тексты.

от 950 

Как разместить картинку по центру в CSS

Существует несколько способов разместить картинку по центру с помощью CSS. Один из них — использование свойств text-align и margin:

<div class="container">
 img src="image.jpg" alt="Картинка">
</div>

.container {
  text-align: center;
}

.container img {
  margin: 0 auto;
}

В этом примере мы задаем свойство text-align: center для контейнера, чтобы картинка была выровнена по центру горизонтально. Затем мы задаем свойство margin: 0 auto для картинки, чтобы она была выровнена по центру вертикально.

Еще один способ — использование свойства display и свойство margin:

<div class="container">
 img src="image.jpg" alt="Картинка">
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container img {
  margin: auto;
}

В этом примере мы задаем свойство display: flex для контейнера, чтобы мы могли использовать свойства justify-content и align-items для выравнивания картинки по центру как по горизонтали, так и по вертикали. Также мы задаем высоту контейнера на 100% видимой области (100vh). Затем мы задаем свойство margin: auto для картинки, чтобы она была выровнена по центру по горизонтали.

Поделиться:

Комментарии

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Меню

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.