垂直居中在固定容器中的图像 [英] Vertically Centering image in fixed container

问题描述

我使用wordpress动态显示图片。每个图像具有186 px的固定宽度和可变高度，具体取决于图像的比例。每个图像都位于一个方形框中，填充15px。默认情况下，图像显示在框的顶部。我正在寻找一种方法来垂直居中的图像，给定它的固定宽度，但可变高度。这是我的代码：

I am using wordpress to dynamically display images. Each image has a fixed width of 186 px and variable height, depending on the proportions of the image. Each image sits in a square box, with 15px padding. By default, the images appear at the top of the box. I am looking for a way to vertically center the image, given its fixed width, but variable height. Here is my code:

HTML：

<div class="logoContainer">
    <img src="/path/to/image.jpg" />
</div>

CSS：

.logoContainer {
    padding: 15px;
    background: #dddddc;
    margin-bottom: 10px;
    width: 186px;
    height: 186px;
}
.logoContainer img {
    max-width: 100%;
    height: auto;
}

我可以使用绝对定位，但不知道图像的确切高度，它将难以完美地居中。但是，我们知道集装箱的确切尺寸。

I could use absolute positioning, but without knowing the exact height of the image, it would be difficult to perfectly center. BUT, we do know the exact dimensions of the container box. Thoughts?

推荐答案

尝试一下 - http://jsfiddle.net/vLbRF/

.logoContainer {
    padding:15px;
    background:#dddddc;
    margin-bottom: 10px;
    width:186px;
    height:186px;
    line-height: 186px;
}

.logoContainer img {
    max-width: 100%;
    vertical-align: middle;
}

这篇关于垂直居中在固定容器中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！