How do I align images in a row all vertically aligned in the middle no matter what height and with a fluid width?

Question

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'm not sure if this is what you mean, but try adding `.img-ctn{vertical-align:middle;}`. — Serlite, Jul 31 '13 at 17:27

hungerstar · Accepted Answer · 2017-02-08T17:59:04.993

I think this is what you're asking for.

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

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

And with your code.

* {
  padding: 0;
  margin: 0;
}
body {
  padding: 20px;
}
.ctn {
  width: 100%;
  text-align: center;
}
.img-ctn {
  display: inline;
  margin-right: 3%;
  max-width: 120px;
  background: #cecece;
  font-size: 0;
}
.img-ctn > img {
  max-width: 100%;
  vertical-align: middle;
}

<div class="ctn">
  <p class="img-ctn">
    <img src="http://dummyimage.com/80x65/000/fff" alt="" />
  </p>
  <p class="img-ctn">
    <img src="http://dummyimage.com/100x30/000/fff" alt="" />
  </p>
  <p class="img-ctn">
    <img src="http://dummyimage.com/70x10/000/fff" alt="" />
  </p>
  <p class="img-ctn">
    <img src="http://dummyimage.com/30x40/000/fff" alt="" />
  </p>
  <p class="img-ctn">
    <img src="http://dummyimage.com/50x65/000/fff" alt="" />
  </p>
</div>

score 1 · Answer 2 · answered Jul 31 '13 at 17:47

Try applying display:table-cell; to the image wrappers, then set padding:3%; instead of margin:

Demo: http://jsfiddle.net/xmJ3R/

.img-ctn {
    display: table-cell;
    max-width: 120px;
    background: #cecece;
    vertical-align:middle;
    padding:3%;
}

or set the margin on the images inside.

How do I align images in a row all vertically aligned in the middle no matter what height and with a fluid width?

2 Answers2

Linked