Как центрировать мой тег img внутри тега изображения по вертикали?

Question

Я хочу выровнять свое изображение по вертикали по марже: auto 0, но оно не работает. Как я могу это исправить?

<header>
  <h1>About me</h1>
  <div>
    <picture>
      <img src=" images/images.png" alt="About me img" height="120" width="190">
    </picture>
    <p class="article">content</p>
  </div>
</header>

CSS

@media(min-width:600px) {
  div {
    display: flex;
    margin: 0 auto;
    width: 90%;
  }

  img {
    margin: auto 0;
  }

, если я делаю

picture {
  padding: auto 0;
}

, это работает, но я хочу сделать это на img тег, а не тег изображения, если браузер не поддерживает тег изображения.

Answer 1

вам нужно применить свойство flex к изображению

#a1{
display:flex;
width:90vw;
height:50vw;
border:1px solid black;
align-items:center;
}

 #a2{
 display:block;
 margin: auto 0 ;
 width:10vw;
 height:10vh;
 border:1px solid red;
 
 }

<div id='a1'>
<picture id='a1'>
      <img  id='a2'  src=" images/images.png" alt="" height="120" width="190">
 </picture>
</div>