CODEWITHSUNDEEP
htmlcss
uwon
uwon

Reputation: 47

How do I center my img tag inside picture tag vertically?

I want to align my image vertically by margin:auto 0, but it is not woking. How can I fix this?

<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;
  }

if I do 

picture {
  padding: auto 0;
}

it works, but I want to do this on img tag rather than picture tag in case the browser doesn't support picture tag.

Upvotes: 1

Views: 895

Answers (1)

DCR
DCR

Reputation: 15700

you need to apply the flex property to picture

#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>

Upvotes: 1

Related Questions