Aligning three images vertically in the center

[SirenaColella]

Hello guys,

I kindly ask you to take a look at this my web page: http://www.cookinggamesforkids.biz/caw/?page_id=225

I can not align vertically in the middle of my three images that are in the first line. Could you give me a hand or a suggestion? thank you very much

I decided not to use the property flex because I think still is not yet supported by all browsers most used.

Thank a lot!

[SirenaColella]

This is my code on CodePen

http://codepen.io/Colella/pen/LGdmpg

[Paulie_D]

Firstly…I don’t think a dl/dt structure is right here. Use a table (if you must) for preference.

Then …and you have a strange combination of display:inline-block and float…pick one or the other…not both…and is this even required?

[Paulie_D]

As for Flexbox..it’s OK for IE10 and up. What is your requirement?

[SirenaColella]

Hi Paulie_D, thanks a lot!

Unfortunately tags dt and dl are entered automatically from my wordpress theme, and unfortunately, I can not do without it!
What I want to achieve is to have the three images aligned to the center, that is, that the three images were balanced on the line.

Can you help me?

ps: ok, I removed float property (thanks!)

[SirenaColella]

I would not use Flexbox because I have problems with Safari 6

[Paulie_D]

Well if you can’t use actual tables, use CSS tables

http://codepen.io/Paulie-D/pen/JGLZJd

[SirenaColella]

Pardon me, I do not intend to bring up any more of your precious time, but I do not think there yet. I would like the fourth image was going to head into a new line, excuse me a lot I’m not understanding how I can get this layout.

This is the example that I’d like to have
http://imgur.com/DeA6Awr

[SirenaColella]

And this is my web page now

http://www.cookinggamesforkids.biz/caw/?page_id=225

[Paulie_D]

You should probably break up the page into rows of three images…then it should work.

Other than that it’s probably a little complex especially given the limitations of the structure.

[gcyrillus]

you may also reset to inline, everything but dt to inline-block .
http://codepen.io/gc-nomade/pen/MKVNLV
max-width on img will shrink them

[SirenaColella]

Great! Thanks a lot to everyone! Thanks Paulie_D and gcyrillus. How can I support this forum? Can I do a donation?

[gcyrillus]

maybe helping someone else where you can will do ;)

[Author]

Posts