Html CSS img 对齐：如何在 DIV 中设置 img 中右对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8992577/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS img align: how to set a img middle-right align in a DIV
提问by Simon
I am looking for a simple way to middle-right align a img in a DIV, i.e., vertical-middle and horizontal-right align, like this:
我正在寻找一种简单的方法来在 DIV 中将 img 居中对齐，即垂直居中和水平居右对齐，如下所示：
I tried using vertical-align:middle and float:right in IMG styles, but seems not work together..
我尝试在 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>
采纳答案by Diodeus - James MacFarlane
<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>
BTW, you are using "styles=" in your image tag. This is invalid.
顺便说一句，您在图像标签中使用了“styles=”。这是无效的。
回答by Salman A
There are many ways to do this. It is very easy if image and its container height is known, tricky otherwise. Choose the solution that suit your needs:
有很多方法可以做到这一点。如果图像及其容器高度已知，则很容易，否则就很棘手。选择适合您需求的解决方案：
Method 1: line height, text-align and vertical align
方法一：行高、文本对齐和垂直对齐
#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">​
</div>Method 2: absolute/relative positioning, image height known
方法二：绝对/相对定位，图像高度已知
#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>Method 3: absolute/relative positioning, image and container height known
方法三：绝对/相对定位，图片和容器高度已知
#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>回答by Patrick M
The display: table-celltrick works well if it is just an image floating in a div. But if you have other elements crowding the image, such as <p>, they will tend to push the image around vertically as they are resized by the browser.
display: table-cell如果它只是一个漂浮在 div 中的图像，那么这个技巧就很有效。但是，如果您有其他元素挤满图像，例如<p>，它们将倾向于在浏览器调整图像大小时垂直推动图像。
http://www.brunildo.org/test/img_center.htmlhas some good information on cross browser support and earlier browser version hacks to get the image displaying correctly in IE's broken box model.
http://www.brunildo.org/test/img_center.html有一些关于跨浏览器支持和早期浏览器版本黑客的好信息，以使图像在 IE 的破盒模型中正确显示。
