时间戳

首页 > 解决方案 > 如何将我的 img 标签垂直居中在图片标签内？

html - 如何将我的 img 标签垂直居中在图片标签内？

问题描述

我想通过 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 标签而不是图片标签上执行此操作，以防浏览器不支持图片标签。

标签： htmlcss

解决方案

您需要将 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>

推荐阅读