Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/73.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 如何在图片标签内垂直居中放置img标签?_Html_Css - Fatal编程技术网

Html 如何在图片标签内垂直居中放置img标签?

Html 如何在图片标签内垂直居中放置img标签?,html,css,Html,Css,我想按边距垂直对齐我的图像:自动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"

我想按边距垂直对齐我的图像:自动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>
如果我这样做

picture {
  padding: auto 0;
}

它可以工作,但我想在img标记上而不是图片标记上执行此操作,以防浏览器不支持图片标记。

您需要将flex属性应用于图片

#a1{
显示器:flex;
宽度:90vw;
高度:50vw;
边框:1px纯黑;
对齐项目:居中;
}
#a2{
显示:块;
保证金:自动0;
宽度:10vw;
高度:10vh;
边框:1px纯红;
}

您需要将flex属性应用于图片

#a1{
显示器:flex;
宽度:90vw;
高度:50vw;
边框:1px纯黑;
对齐项目:居中;
}
#a2{
显示:块;
保证金:自动0;
宽度:10vw;
高度:10vh;
边框:1px纯红;
}


它不垂直居中。红色框表示图像垂直居中。你是说水平方向吗?对不起,我是说我将此代码添加到css文件中,但它不起作用。它不垂直居中。红色框表示图像垂直居中。你的意思是水平的吗?对不起,我是说我把这个代码添加到我的css文件中,但它不起作用。
picture {
  padding: auto 0;
}