Question

我想通过margin：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>

如何将img标签垂直放置在图片标签内？

1 个答案: