CSS: How to align differently sized images in a line?

Question

I am trying to align differently sized images in a line using the vertical-align property as well as by keeping top:50%

Now it does solve the problem partially as all the images are vertically in the middle but due to the different sizes of the images they are not aligned "like pearls on a string"

I want to somehow make images go top:50% from the centre of the image not it's border.

Answer 1

my simple example which uses jquery

http://jsbin.com/ekazo3

Answer 2

What exactly are you tying to achieve, align the images so their top makes a line?
If it's not, please explain better.

Use padding-top on the parent element, like so:

HTML

<div class="centeredImagesBox ">
    <img width="50px" height="50px" src="" alt="coiso" />
    <img width="50px" height="100px" src="" alt="coiso coiso" />
</div>

CSS:

.centeredImagesBox {
    padding-top: 50%;
    border: solid red 1px;
    vertical-align: top;
}
img {
    border: solid blue 1px;
    vertical-align: top;
    display: inline-block;
}

Check it using JSFiddle.