html - CSS img 对齐 : how to set a img middle-right align in a DIV

Question

我正在寻找一种在 DIV 中将 img 居中右对齐的简单方法，即垂直居中和水平居右对齐，如下所示:

我尝试在 IMG 样式中使用 vertical-align:middle 和 float:right，但似乎不能一起工作..

<div style='height: 300px; width: 300px'>
    <img src= 'http://www.w3schools.com/tags/smiley.gif' style='vertical-align: middle; float: right;'/>
</div>

Answer 1

有很多方法可以做到这一点。如果图像及其容器高度已知，这就非常容易，否则就很棘手。选择适合您需求的解决方案:

方法一:行高、文本对齐和垂直对齐

#div1 {
  width: 300px;
  height: 300px;
  background-color: blue;
  line-height: 300px;
  text-align: right;
}
#div1 img {
  vertical-align: middle;
}

<div id="div1">
  <img src="http://dummyimage.com/100x50/fc0/000000.png">&#8203;
</div>

方法二:绝对/相对定位，图片高度已知

#div1 {
  width: 300px;
  height: 300px;
  background-color: blue;
  position: relative;
}
#div1 img {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -25px; /* -(image_height/2) */
}

<div id="div1">
  <img src="http://dummyimage.com/100x50/fc0/000000.png">
</div>

方法三:绝对/相对定位，已知图片和容器高度

#div1 {
  width: 300px;
  height: 300px;
  background-color: blue;
}
#div1 img {
  float: right;
  position: relative;
  top: 125px; /* (div_height-image_height)/2 */
}

<div id="div1">
  <img src="http://dummyimage.com/100x50/fc0/000000.png">
</div>

jsFiddle