CSS img align：如何在 DIV 中设置 img 中右对齐

Posted 2023-03-05

【中文标题】CSS img align：如何在 DIV 中设置 img 中右对齐

【英文标题】：CSS img align: how to set a img middle-right align in a DIV

【发布时间】：2012-02-18 00:55:51

【问题描述】：

我正在寻找一种简单的方法来在 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>

【参考方案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>

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

#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

【参考方案2】：

display: table-cell 技巧如果只是漂浮在 div 中的图像，则效果很好。但是，如果您有其他元素挤满了图像，例如<p>，它们会在浏览器调整大小时倾向于垂直推动图像。

http://www.brunildo.org/test/img_center.html 提供了一些关于跨浏览器支持和早期浏览器版本黑客的有用信息，以使图像在 IE 的破盒模型中正确显示。

【参考方案3】：

<DIV style='height: 300px; width: 300px;border:1px solid #ff0000;display:table-cell;vertical-align: middle'>
<img src= 'http://www.w3schools.com/tags/smiley.gif' style='float:right;'/>
</DIV>

顺便说一句，您在图像标签中使用了“styles=”。这是无效的。