Изображение в гибком контейнере не центрируется после определения ширины и высоты

Question

Я делаю личное портфолио, используя css flex box. то, что я пытаюсь сделать, это центрировать изображение по горизонтали. Оно было отцентрировано, но проблема в том, что после того, как я определил width и height до img, изображение находится в начале или влево теперь не в центре.

Вот как это выглядит, когда вы центрированы и не определяете width и height

.center-img{
  border-radius: 50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}

<div class="center-img">
  <img src="https://png2.kisspng.com/sh/06560124247439e98f5534b17467b691/L0KzQYm3VcA5N5DBiZH0aYP2gLBuTgV0baMye9H2cIX3dcO0ifNwdqQyiAt8dHXwPbTvif5me5Yyj9t3ZD33ecXzhb1kd516hdC2NXHpQYW5VBZlO5JnTKo3M0e7RIa8VccyPWM6T6g5NkO8SIeATwBvbz==/kisspng-user-computer-icons-system-chinese-wind-title-column-5af1427fd3ab48.378455571525760639867.png" alt="user">
  <h1>User</h1>
</div>

А вот как это выглядело после определения width и height

.center-img{
  width:100px;
  height:100px;
  border-radius: 50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}

<div class="center-img">
  <img src="https://png2.kisspng.com/sh/06560124247439e98f5534b17467b691/L0KzQYm3VcA5N5DBiZH0aYP2gLBuTgV0baMye9H2cIX3dcO0ifNwdqQyiAt8dHXwPbTvif5me5Yyj9t3ZD33ecXzhb1kd516hdC2NXHpQYW5VBZlO5JnTKo3M0e7RIa8VccyPWM6T6g5NkO8SIeATwBvbz==/kisspng-user-computer-icons-system-chinese-wind-title-column-5af1427fd3ab48.378455571525760639867.png" alt="user">
  <h1>User</h1>
</div>

Я ожидаю, что после определения width и height изображения это не повлияет на положение изображения. так должно быть в центре. спасибо!

Answer 1

Вам нужно изменить размеры элементов внутри.

Изображение можно контролировать с помощью max-width и max-height относительно контейнера.Я добавил красную рамку, чтобы вам было удобнее видеть контейнер.

Кроме того, элемент h1 поставляется с большими font-size и margin по умолчанию, поэтому для них тоже нужно установить значения.

.center-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* change text-align to align-items */
  border: 1px red solid; /* this is just so you can easily see the container */
}

.center-img img {
  max-width: 100%; /* dimensions relative to the container size */
  max-height: 40%; /* dimensions relative to the container size */
  height: auto; /* keep aspect ratio */
  width: auto; /* keep aspect ratio */
}

.center-img h1 {
  margin: 5px 0 0; /* h1 has default margin-top and margin-bottom */
  font-size: 18px; /* Set this to a reasonable size */
}

<div class="center-img">
  <img src="https://png2.kisspng.com/sh/06560124247439e98f5534b17467b691/L0KzQYm3VcA5N5DBiZH0aYP2gLBuTgV0baMye9H2cIX3dcO0ifNwdqQyiAt8dHXwPbTvif5me5Yyj9t3ZD33ecXzhb1kd516hdC2NXHpQYW5VBZlO5JnTKo3M0e7RIa8VccyPWM6T6g5NkO8SIeATwBvbz==/kisspng-user-computer-icons-system-chinese-wind-title-column-5af1427fd3ab48.378455571525760639867.png"
    alt="user">
  <h1>User</h1>
</div>

Answer 2

Несколько вещей для рассмотрения:

1. Вы никогда не центрировали изображение.

   В первом примере кода изображение занималовся ширина области просмотра, так что она просто оказалась в центре.При уменьшении размера изображения с помощью width и height оно выравнивается по левому краю в соответствии со значением по умолчанию.Используйте align-items для горизонтального центрирования элементов Flex в контейнере в направлении столбцов.

2. Не используйте изображения в качестве элементов Flex.Существует множество ошибок.

   Изображения в виде гибких элементов, как известно, имеют проблемы с отображением в разных браузерах.Вместо этого оберните изображение в элемент div и сделайте его элементом flex.

3. Совместите изображение во вложенном контейнере со свойствами flex.

   Используйте вложенный гибкий контейнер для центрирования изображения.

.center-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: lightgray;
}

.center-img > div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  border: 1px dashed red;
  
}

.center-img > div > img {
  width: 100%;
}

h1 {
  margin: 0;
}

<div class="center-img">
  <div>
    <img src="https://png2.kisspng.com/sh/06560124247439e98f5534b17467b691/L0KzQYm3VcA5N5DBiZH0aYP2gLBuTgV0baMye9H2cIX3dcO0ifNwdqQyiAt8dHXwPbTvif5me5Yyj9t3ZD33ecXzhb1kd516hdC2NXHpQYW5VBZlO5JnTKo3M0e7RIa8VccyPWM6T6g5NkO8SIeATwBvbz==/kisspng-user-computer-icons-system-chinese-wind-title-column-5af1427fd3ab48.378455571525760639867.png"
      alt="user">
  </div>
  <h1>User</h1>
</div>

Answer 3

Примените высоту и ширину только к img и добавьте align-items: center следующим образом:

.center-img {
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

img {
 width: 100px;
 height: 100px;
}

<div class="center-img">
  <img src="https://png2.kisspng.com/sh/06560124247439e98f5534b17467b691/L0KzQYm3VcA5N5DBiZH0aYP2gLBuTgV0baMye9H2cIX3dcO0ifNwdqQyiAt8dHXwPbTvif5me5Yyj9t3ZD33ecXzhb1kd516hdC2NXHpQYW5VBZlO5JnTKo3M0e7RIa8VccyPWM6T6g5NkO8SIeATwBvbz==/kisspng-user-computer-icons-system-chinese-wind-title-column-5af1427fd3ab48.378455571525760639867.png"
            alt="user">
 <h1>User</h1>
</div>