I am working on this page http://www.donchisciotte-lucca.it/it/offerte
and as you can see I want to have the 4 pictures, with 3 divs over each of them (a title, a description and a button). I have put the 3 divs in inline-block in order to center them vertically over the single picture, but they display all in the same line. They should be one per line, but everything I tried does not work.
How can I solve this?
Thanks a lot
Either way, I think you will be looking at a work-around, but I think it might make more sense to use display:block and find a way to get the right vertical spacing, rather than using display:inline-block and having to force them on different lines. So what about making the .offerte .g-array-item div items display:block and then giving them a % margin-top, for instance: margin-top:30%.
Try that out and see how it looks?