dvpr_learner dvpr_learner - 5 months ago 11
CSS Question

Vertical align an img inside a div - My live site differs to JSFiddle? Why?

Trying to vertical align an img inside a div. Managed to do it in JSFiddle, but can't get it to work on a live page.

I'm assuming I've missed something obvious but any help appreciated.

.partner_box {
height: 100px;
line-height: 100px;
}

.partner_box img {
vertical-align: middle;
}


Fiddle:
https://jsfiddle.net/dvpr_learner/dx7uek55/

Live Page (not working):
http://f4d.co.uk/test

Answer

you might try using <!DOCTYPE html> instead of the transitional doctype you're using now on the Live site, and see if that makes a difference.


The Live site seems to be missing a selector that IS present in the Fiddle. Try adding this to your Live page's CSS.

.partner_box img {
    vertical-align: middle;
    width: 100%;
}