Hi,

I have installed:
Joomla 3.4.5
VM 3.0.12
CleanMart 3.9

In my CM I made some modifications to make all blocks for images,names ans prices equal heights between product im category view (flex2.php).
I added some extra div's with <div style='min-height: 150px'> to set the height of my image blocks.
What I want is that the images are centered in this block, I use now the following code to center the images but they are only centered horizontally and not vertically:
.FlexibleBrowseThumbProductInner img{margin:auto; display:block; vertical-align:middle;} /* center all thumbs */
How to get the images also vertical aligned?

Thanks
Michiel

Hi,

Vertical-Align attribute is a something adopted from the TABLE behaviors. DIVS don't work like the way TABLE works. Vertical-align:middle; centers the contents vertically respectful to sibling element that comes next or prev within the inline.
orwill center the whole DIV itself vertically respectful to IMG.. got it? FYI: if you put a background-color:red; attribute to DIV and run this piece of code in a browser, you will see what I mean. You will notice that, the whole DIV itself gets vertical-align:middle respectful to IMG.

if you just have this:vertical-align won't do anything. Because the whole DIV will be vertical-align:middle to respectful to nothing.

For more info about what "vertical-align" is and what it is not, see this article: phrogz.net/css/vertical-align/

It is possible to manipulate a DIV and make them behaves like TABLE (by using display:table-cell attribute), then we can use "vertical-align:middle" for the contents of child element. But keep this in mind, this won't work on webKit based browsers. It would work on Firefox but not on Safari & Chrome (thus won't work on IOS & android as well).

Since, the heights are changing for each child-element (for each picture), we can't use position:absolute or padding-top rules for the parent DIV as well (simply because the height of pictures are not constant, because height of thumbnails are changing for each product, i suppose...)

Vertically-aligning in the modern web development is something that requires "tricks".. There are actually many different ways, you just need to find and use the best method. I just googled it and found these:
zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
and
stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css

I can't confirm they would work but worths trying..

TIP: The most professional way to tackle this problem is to have "same aspect ratio" for product pictures. Ideally, the same resolution is the best, but having the same aspect ratio would also be enough.. (Aspect ratio is the ratio between width and height. i.e: 1:1, 16:9, 2:1 etc..), so once thumbnails are generated, all of them will have same height & width.. Then the category page will look just perfect. This is something you see in all good looking eCommerce websites. But i guess this ship has sailed already. Especially if you have too many products; it would take hours & days to photoshop product pictures and make them have the same aspect ratio.

Regards.