Hi guys,

 

As the title suggests i'm looking to vertically center each of my <div> content.

 

Please see my attachment and it should become clear what i'm after.

 

Here's my code as it stands.

 

http://jsfiddle.net/2Kqnu/

 

I've tried various methods such as vertical-align: middle; margin-top:?? ; margin-bottom:?? ; padding:?? ; but nothing seems to be taking affect for some reason.

 

Thank you once again.

 

 

 

 

 

 

This may help:

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Thanks Peter, but tried their method with no joy.

Display: table and display: table-cell will align content with the middle vertically.

 

Display: table is not the old table code (which should not be used for page structure). Display: table is the modern way to get elements like div to perform like the old table, ie centering vertically so content lines up in every adjacent display: table-cell.

Edited August 29, 201313 yr by Wickham

Thanks Wickham,

 

I've given that a go, and inserted display: table; in my .item class. Please see the results in my attachment.

 

Perhaps its something else in my CSS (or HTML) thats preventing it to display correctly??

 

http://jsfiddle.net/C9P7D/

 

I also tried display: table-cell; which did not work either.

 

Sorry to be a pain, but I think this is the final issue I have with this particular page, and would really appreciate it if you could look over my code if you have time.

 

Many thanks.

 

 

Hi Greg,

 

Please check the following:

http://jsfiddle.net/C9P7D/2/

Edited August 29, 201313 yr by SmartPeter

Thanks Peter,

 

Just tried that as well, no luck unfortunately. I appreciate its the right answer but there must be something elsewhere in my code thats preventing it from happening.

Please try this one:

http://jsfiddle.net/C9P7D/3/

 

I replaced "p" with "div" tags.

Also, made small changes to the CSS ( area I changed should be marked by /*REGION "changed*/ and /*END REGION "changed*/)

Thanks Peter