CSS：如何垂直和水平对齐图像？ [英] CSS: how to vertically and horizontally align an image?

问题描述

我的网页有一个图片的空间，例如最大为100x100的图片。用户可以上传任何图像维度，Web应用程序将调整其大小，保持高宽比为100x100。因此，图像可以调整为，例如，75x100或100x75等。

My page has space for an image that can be, say, a maximum 100x100 image. Users can upload any image dimension and the web application will resize it, maintaining aspect ration, to 100x100. So, it's possible for images to be resized to, say, 75x100 or 100x75, etc.

无论调整大小的图像尺寸，我希望它出现垂直和水平居中在其分配的空间在网页上。我如何在CSS中这样做？我需要一个包含div，像这样：

Regardless of the resized image's dimension, I want it to appear vertically and horizontally centered in its allocated space on the web page. How do I do this in CSS? Will I need a containing div, like this:

<div class="image_container">
     <image src="http://placehold.it/100x100/" height="100" width="100" alt=""/>
</div>

无论如何，示例CSS将会有所帮助。感谢！

Anyway, sample CSS would be helpful. Thanks!

推荐答案

尝试这个 - http：/ /jsfiddle.net/zYx4g/
这将适用于任何大小的图像和所有浏览器。

Try this - http://jsfiddle.net/zYx4g/ This will work on image of any size and in all browsers.

.image_container {
    width: 300px;
    height: 300px;
    background: #eee;
    text-align: center;
    line-height: 300px;
}

.image_container img {
    vertical-align: middle;
}
​

这篇关于CSS：如何垂直和水平对齐图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！