如何将图像对齐在中间的所有垂直对齐的行中的图像，无论高度和流体宽度？ [英] How do I align images in a row all vertically aligned in the middle no matter what height and with a fluid width?

问题描述

我试图创建一些流体图像并排对齐，但也应该在中间垂直对齐，无论什么高度尺寸，我已设置图像有一个最大宽度：100％所以他们保持在他们的父母最大宽度，所以我可以减小这些在更小的屏幕宽度的大小。我的问题是，我不知道垂直对齐这些图像的最佳方式，任何人都可以建议？

CSS

  .img-ctn {
 display：inline-block; 
 margin-right：3％; 
 max-width：120px; 
 background：#cecece; 
} 
 
 .img-ctn> img {
 display：block; 
 height：auto; 
 max-width：100％; 
 min-width：100％; 
 vertical-align：middle; 
} 
  

小提琴： http://jsfiddle.net/xmJ3R/

解决方案

我认为这是你要的。

http ：//jsfiddle.net/Fu8Ck/1/

http ：//jsfiddle.net/xmJ3R/3/ （首先没有看到您的jsFiddle）

HTML

 < div class =container> 
< div> 
< img src =http://lorempixel.com/100/75//> 
< / div> 
< div> 
< img src =http://lorempixel.com/100/175//> 
< / div> 
< div> 
< img src =http://lorempixel.com/100/25//> 
< / div> 
< div> 
< img src =http://lorempixel.com/150/125//> 
< / div> 
< / div> 
  

CSS

< pre class =lang-css prettyprint-override> .container> div {
display：inline;
}
.container img {
max-width：100％;
vertical-align：middle;
}


I'm trying to create some fluid images that are aligned side by side but should also be vertically aligned in the middle no matter what there height dimensions are, I've set the images to have a max-width: 100% so they stay within their parents max-width so I can reduce these in size at smaller screen widths. My problem however is that I'm not sure of the best way to vertically align these images, can anyone advise?

CSS

.img-ctn {
    display: inline-block;
    margin-right: 3%;
    max-width: 120px;
    background: #cecece;
}

.img-ctn > img {
    display: block;
    height: auto;
    max-width: 100%;
    min-width: 100%;
    vertical-align: middle;
}

Fiddle: http://jsfiddle.net/xmJ3R/

解决方案

I think this is what you're asking for.

http://jsfiddle.net/Fu8Ck/1/

http://jsfiddle.net/xmJ3R/3/ (Didn't see your jsFiddle at first)

HTML

<div class="container">
    <div>
        <img src="http://lorempixel.com/100/75/" />
    </div>
    <div>
        <img src="http://lorempixel.com/100/175/" />
    </div>
    <div>
        <img src="http://lorempixel.com/100/25/" />
    </div>
    <div>
        <img src="http://lorempixel.com/150/125/" />
    </div>
</div>

CSS

.container > div {
    display: inline;
}
.container img {
    max-width: 100%;
    vertical-align: middle;
}

这篇关于如何将图像对齐在中间的所有垂直对齐的行中的图像，无论高度和流体宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！