css - 如何将img标签定位在正确的中心？

Question

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

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

Answer 1

在你的css中试试这个代码，

    float:right;
    margin-top:25%;

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

祝你好运 ！

Answer 2

您可以为此使用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 及更高版本。

Answer 3

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

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 刚刚更新其支持以遵循当前规范。

Answer 4

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

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

Answer 5

尝试使用 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 模板。