Как центрировать картинку css: Как сделать центрировать изображение, выровнять по центру

html — Как растянуть изображеие, и как центрировать изображение?

1. Как Растянуть Изображение id="picture1" до левого края?

2. Что я сделал не так с изображением id="picture2", что оно не находится по центру.

* {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

.header {
  height: 84px;
  background-color: white;
}

.banner {
  height: 570px;
}

.banner img {
  float: right;
}

.content {
  margin-top: 99px;
}

.contentMain {}

.contentCaption {
  color: #515151;
  font-size: 31px;
  font-weight: 400;
  line-height: 50px;
  text-transform: uppercase;
  text-align: center;
}

.contetnMain img {
  display: block;
  margin: auto;
}

<div>

  <div>

  </div>

  <div>
    <img src="https://avatars.  mds.yandex.net/get-pdb/70729/b0f5ed0d-e398-4a2a-9b08-f4fdad86d054/s1200" alt="">
  </div>

  <div>
    <div>
      <img src="https://avatars.mds.yandex.net/get-pdb/1337375/b7e6f3dd-e1ef-47d5-a957-757ee731c61e/s1200" alt="">
    </div>
    <h2>Our work is the presentation of our capabilities.
    </h2>
  </div>

  <div>

  </div>

</div>

---

Чуть не забыл про CSS код, который в теге style записал

* {
    box-sizing: border-box;
}
* {
margin:0;
padding:0;
}

• html
• css

Растянуть изображение можно указав его в качестве фона с наилучшим заполнением

background: url('url') center / cover

Отцентрировать вторую картинку в вашем примере ожно просто указав

text-align: center;

* {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

.
  header {
  height: 84px;
  background-color: white;
}

.banner {
  height: 570px;
  background: url('https://avatars.mds.yandex.net/get-pdb/70729/b0f5ed0d-e398-4a2a-9b08-f4fdad86d054/s1200') center / cover;
}

.banner img {
  float: right;
}

.content {
  margin-top: 99px;
}

.contentMain {
  text-align: center;
}

.contentCaption {
  color: #515151;
  font-size: 31px;
  font-weight: 400;
  line-height: 50px;
  text-transform: uppercase;
  text-align: center;
}

.contetnMain img {
  display: block;
  margin: auto;
}

<div>

  <div>

  </div>

  <div>

  </div>

  <div>
    <div>
      <img src="https://avatars.mds.yandex.net/get-pdb/1337375/b7e6f3dd-e1ef-47d5-a957-757ee731c61e/s1200" alt="">
    </div>
    <h2>Our work is the presentation of our capabilities.  
    </h2>
  </div>

  <div>

  </div>

</div>

11

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как центрировать изображения с помощью CSS

Аннотации

Хотите центрировать изображение с помощью CSS? Проблемы с выравниванием часто являются источником разочарования для веб-дизайнеров. К счастью, центрировать изображение с помощью CSS очень просто, и мы покажем вам, как это сделать за несколько шагов.

Как и в случае со многими задачами веб-дизайна, это можно сделать несколькими способами! В этой статье мы рассмотрим некоторые из основных методов. Давайте начнем! Проверять Как редактировать веб-страницы в Safari с помощью Inspect Element.

1. Используйте функцию маржи

Установка свойства margin — один из самых простых способов центрировать изображение по горизонтали с помощью CSS. Поля являются важным компонентом шаблона блока CSS.

Во-первых, вам нужно будет преобразовать элемент изображения из встроенного элемента в блочный элемент. HTML-элементы блочного уровня занимают всю ширину своего родительского элемента и могут занимать всю ширину страницы.

Сделав элемент изображения блочным, вы сможете управлять его положением, регулируя его горизонтальные поля. Вам также потребуется установить определенную ширину для изображения, чтобы определить, сколько места изображение занимает на странице.

Какую бы ширину вы ни выбрали, у изображения должны быть одинаковые поля слева и справа. Вы можете легко добиться этого, присвоив свойству Margin автоматическое значение:

img.center {
 display: block;
 margin-left: auto;
 margin-right: auto;
 width: 800px;
}

2. Используйте раскладку Flexbox

Этот метод требует, чтобы изображение было помещено в блочный элемент, обычно это div:

<div class=”center”>
 <img src=”xyz.jpg”>
</div>

Как только вы это сделаете, вы можете добавить некоторые свойства для управления его внешним видом. Вы будете использовать два свойства CSS.

Первое — это свойство ширины со значением flex. Вы также можете использовать flex для выравнивания элементов в HTML. Второе свойство, которое вы добавите в div, — это justify-content со значением, установленным в центр следующим образом:

div.center {
 display: flex;
 justify-content: center;
}

3. Используйте центрирующий элемент

Лучшие веб-практики рекомендуют вам использовать CSS для стилей и HTML для семантики, поэтому вам не следует использовать этот метод HTML.

Тег center, который центрирует свое содержимое по горизонтали, устарел в HTML5.

Но если вам нужно, вот как центрировать изображение, используя только HTML. Просто оберните тег img внутри центрального тега следующим образом:

<center>
 <img src=”xyz.jpg”>
</center>

Вот как выровнять ваши HTML-изображения

Мы показали вам три различных, простых в использовании способа центрирования изображений в документе HTML. Попробуйте их все и выберите лучший для себя. Избегайте третьего метода, если у вас нет абсолютно никакого выбора!

Следует иметь в виду, что существует немало других способов центрирования изображений с помощью HTML и CSS. Одним из распространенных методов, который работает как с текстом, так и со встроенными изображениями, является функция выравнивания текста. Теперь вы можете просмотреть Веселые игры, которые помогут вам легко изучить программирование на CSS.

Источник

Центрирование изображения внутри flexbox — HTML и CSS — Форумы SitePoint

Stribor45 27 января 2018 г. , 1:58 1

Как центрировать изображение (по вертикали и горизонтали) внутри элемента flexbox.

Рэй.Х 27 января 2018 г., 2:29 2

Выравнивание элементов во Flex-контейнере

Вы уже пробовали что-то подобное…

 .box {
  дисплей: гибкий;
  выравнивание элементов: по центру;
  выравнивание содержимого: по центру;
}
.box изображение {
  ширина: 100 пикселей;
  высота: 100 пикселей;
}
<дел>
  <изображение>

 <дел>
    <дел>
        <изображение>