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

马丁·EG

我想通过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标签而不是图片标签上执行此操作。

DCR

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将图片标签包裹在img标签周围

如何将标签放置在饼图中

如何使<hr />标签垂直放置

在TextMate中,如何将光标放置在新生成的HTML标签内?

如何将标签页放置在与Google+应用类似的其他布局下?(示例图片包含)

如何将条形图标签放置在条形的“底部”

Vue:如何将单选按钮放置在标签的中心

如何将graphviz子图簇的标签放置在左侧?

如何将标签或按钮准确地放置在表单的中间?

如何将ContextMenuStrip放置在链接标签下方?

如何在p标签上放置图片?

如何在 img 标签中放置静态谷歌图片地图网址?

如何在页面上放置垂直标签

如何将 HTML img 标签与属性匹配

如何将图像数据传递到img标签?

如何将所有HTML img close标签转换为XML兼容?(<img>至<img />)

如何将本地磁盘上的图片(如相册)复制到图片标签中?

在视频标签内将视频垂直居中

如何将文本放在容器中带有 img 标签的图像上,然后将该文本居中放置在该 div 中?

将div标签放置在图片的右下角

如何将JButton彼此垂直放置?

如何将 div 标签内的文本与链接对齐。

Pug js 如何将 span 元素留在标签内

如何将标签元素放入div元素内

如何将单选按钮包装在轨道标签内

如何将标签在Godot的节点内居中?

如何将变量放入javascript中的innerHTML标签内?

img标签未正确放置

CSS:将IMG标签放置在div中且溢出