每行并排显示2个图像，水平和垂直居中 [英] Display 2 images per row side by side, centered horizontally and vertically

问题描述

假设我想在我的网页中显示4张图像，如下所示：

  img1 img2 
 
 img3 img4 
  

我希望每幅图片都占据网页宽度的50％，但如果它的宽度小于50％，则以此空间为中心（所以我需要将它居中到左宽度的50％）。

同样，我希望高度较低的图片相对于图片高度居中。

示例：

p>

到目前为止我所尝试过的：

HTML：

 < div class =imgGroup> 
< div class =groupImg> 
< img src =images / speed.pngalt =风速图> 
< / div> 
< div class =groupImg> 
< div class =strongCenter> 
< img src =images / wind_now.pngalt =现在风向> 
< / div> 
< / div> 
< / div> 
  

CSS：

  .groupImg img {
 display：inline-block; 
 margin-left：auto; 
 margin-right：auto; 
职位：亲属; 
 float：left; 
最大宽度：50％; 
 border-radius：10px; 
} 
  

我将图像2-2分组在 imgGroup ，以为我必须使用div的高度才能将图像居中放置。 解决方案 div>

HTML - >

 < div class =imgGroup> 
< div class =groupImg> 
< img src =http://i.imgur.com/WZUUq4g.jpgwidth =height =150alt =风速图/> 
< / div> 
< div class =groupImg> 
< div class =strongCenter> 
< img src =http://bit.ly/1apzyBywidth =height =100alt =风向现在/> 
< / div> 
< / div> 
< / div> 
  

CSS - >

  .imgGroup {
 background：Silver; 
 display：table; 
宽度：100％; 
} 
 .groupImg {
 display：table-cell; 
 text-align：center; 
宽度：50％; 
 vertical-align：middle; 
} 
 .groupImg img {
 background：White; 
宽度：100％; 
 border-radius：10px; 
 display：block; 
} 
 
 .strongCenter img {
 width：50％！important; 
 display：inline-block; 
} 
  

Let's say that I would like to display 4 images in my webpage like this:

img1 img2

img3 img4

I want every image to take 50% of the width of the webpage, but if its width is less than 50%, to be centered to this space (so I need it to be centered to the 50% of the left width).

Similarly, I want the image with the less height to be centered relatively to the height of the image on its side.

Example:

What I've tried till now:

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;
}

I've grouped the images 2-2 in imgGroup with the thought that I have to work with the height of the div in order to center the images inside.

解决方案

HTML->

<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->

.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;
}

这篇关于每行并排显示2个图像，水平和垂直居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！