每行并排显示2个图像，水平和垂直居中

Question

让我们说我想在我的网页上显示4张图片：

img1 img2

img3 img4

我希望每张图片都占据网页宽度的50％，但是如果它的宽度小于50％，则要居中到这个空间（所以我需要它居中到左边宽度的50％ ）。

同样，我希望高度较小的图像相对于图像侧面的高度居中。

示例：

到目前为止我一直在尝试：

HTML：

<div class="imgGroup">
    <div class="groupImg">
        <img src="images/speed.png" alt="Wind Speed Graph">
    </div>
    <div class="groupImg">
        <div class="strongCenter">
            <img src="images/wind_now.png" alt="Wind Direction Now">
        </div>
    </div>
</div>

CSS：

.groupImg img {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    float: left;
    max-width: 50%;
    border-radius: 10px;
}

我已将{2}中的图像分组为imgGroup，并认为我必须使用div的高度才能使图像居中。

Answer 1

<强> HTML-＆GT;

<div class="imgGroup">
    <div class="groupImg">
        <img src="http://i.imgur.com/WZUUq4g.jpg" width="" height="150" alt="Wind Speed Graph" />
    </div>
    <div class="groupImg">
        <div class="strongCenter">
            <img src="http://bit.ly/1apzyBy" width="" height="100" alt="Wind Direction Now" />
        </div>
    </div>
</div>

<强> CSS-＆GT;

.imgGroup {
    background:Silver;
    display:table;
    width:100%;
}
.groupImg{
    display:table-cell;
    text-align:center;
    width:50%;
    vertical-align:middle;
}
.groupImg img {
    background: White;
    width: 100%;
    border-radius: 10px;
    display: block;
}

.strongCenter img{
    width: 50% !important;
    display: inline-block;
}