ImageBlock Vertical-Align: middle

Hello, I got these feature item images that are in different ratio than all the other pictures, because I want to fit them properly in your NSP module on the frontpage.

That being said, in the category item view they will break the layout because the height is different from the other pictures.

-Regular item pictures: 278 x 278 px
-Featured item pictures: 278 x 178 px

I came up with this override that fixes half of the problem :

Code: Select all

.itemImageBlock > a {
height: 278px;
}


However I would like that featured item picture to be in Vertical-Align: middle mode. I tried this code from a thread on google, but that did not work:

Code: Select all

.itemImageBlock > a {
height: 278px;
display: inline-block;
width: 100%;
vertical-align: middle;
}



Any ideas?
Thank you.
Regards

Aligning vertically is one of the hardest things in css and usually require something more than css (additional html mockup).
Please provide a link to a place where you would like to align the elements and I'll see if there is anything that could be done.

Link: http://www.mauzaza.com/products

Correction: -Featured item pictures: 278 x *148 px

Thank you

Code: Select all

div.itemList article.itemView .itemImageBlock > a {
line-height: 278px;
height: 278px;
}


This is a first step - you need to set also line-height.
Now a little hack:

Code: Select all

.itemImageBlock img {vertical-align: middle; display: inline;}


image needs to be set as inline and its vertical-align needs to me middle.

Sweet! Well done Cyberek, it works!

Thanks
Regards.

Great
Please let me know if you would have any additional questions regarding this topic.