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

i'm trying create fluid images aligned side side should vertically aligned in middle no matter there height dimensions are, i've set images have max-width: 100% stay within parents max-width can reduce these in size @ smaller screen widths. problem i'm not sure of best way vertically align these images, can 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 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 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>