如何将img标签定位在正确的中心？答案

【问题标题】：how to position img tag at right centre?如何将img标签定位在正确的中心？
【发布时间】：2013-01-14 21:52:56
【问题描述】：

 <div >
        <img  src="some url"  />
 </div>

div 的高度和宽度不断变化。我想把这个 img 放在右对齐并垂直放置在中心。图像的高度和宽度是固定的。如何动态解决？有时div的宽度和高度与img的宽度和高度相同。或者div的宽高大于img的宽高...

【问题讨论】：

stackoverflow.com/questions/388180/…
@rejo 这不是 OP 想要的

标签： css image html

【解决方案1】：

在您的 css 中尝试此代码，

    float:right;
    margin-top:25%;

您可以在此处查看完整的代码和示例。 http://jsfiddle.net/VzLjq/

祝你好运！

【讨论】：

我面临的问题是 div 的高度不同，我试图让图像垂直居中。是的，当将 margin-top 设为 25% 时，它会下降并比 top 少 25%。但是如何处理底部？

【解决方案2】：

试试这个，我认为在这种情况下它应该对你有所帮助：

div{
  position: relative;
}
img{
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
}

【讨论】：

【解决方案3】：

尝试使用 css。

#content img.alignleft {display:inline; float:left; margin:5px 15px 5px 0;}
#content img.alignright {float:right; margin:5px 0 5px 15px;}
#content img.aligncenter {display:block; margin:10px auto;}
#content img.border {background:#ccc; border:4px solid #f0f0f0; color:#333; padding:1px;}

和你的 html

<img class="alignright" src="img/test.jpg" height="225" width="300"
alt="Example content image using the class .alignright" />

尝试根据您的要求使用这些 css 模板。

【讨论】：

【解决方案4】：

您可以为此使用 display:table。像这样写：

HTML

<div class="parent">
  <div class="child">
    <img  src="http://dummyimage.com/200x200/000/fff&text=image"  />
  </div>
</div>

CSS

.parent{
  height:400px;
  border:1px solid red;
  text-align:right;
  display:table;
  width:100%;
}
.parent .child{
  display:table-cell;
  vertical-align:middle;
  width:100%;
  height:100%;
}

查看http://jsfiddle.net/qEYuD/

IE8 及以上版本都可以使用。

【讨论】：

【解决方案5】：

如果你的图片是静态的，你可以使用相对定位和负边距：

http://jsfiddle.net/qEYuD/3/

.parent{
  height:400px;
  border:1px solid red;
  text-align: right;
}

.parent img {
  position: relative;
  top: 50%;
  margin-top: -100px; /* half the height of the image */
}

如果你的图片和容器都有未知的尺寸，Flexbox 可以用最少的标记做到这一点：

http://jsfiddle.net/qEYuD/4/（不包括前缀）

.parent{
  height:400px;
  border:1px solid red;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
}

Flexbox 的缺点是浏览器支持还不完善。 IE10 是第一个支持它的 IE 版本，Firefox 刚刚更新其支持以遵循当前规范。

【讨论】：