CSS vertical align image in div
You want to vertically align an image inside of an HTML element. CSS sometimes just doesn't deliver, and this is a perfect example of it not delivering...
The solutions are out there, but, the answers aren't always pretty.
- If you know the height of the element, you can just do the math yourself and pad the container or position absolute... or whatever archaic method suits you best.
display: table-cell; vertical-align: middle; to the container and it will do the above for you... which is a lot more presentable and saves your brain some thinking... except this may run into issues with floated elements or elements not resized by other elements.
Anyways, here's the jist of the code for dealing with relative positioning:
itemThatHasHeight = $('#whateverSelector').height(); itemNeedsAlign = $('#itemVerticallyAligning').height(); paddingTop = (itemThatHasHeight/ 2) -(itemNeedsAlign/2) ; paddingTop = paddingTop + 'px'; $('#selectorNeedingVerticalAligning').css('padding-top',paddingTop);
- There are of course other solutions, detailed in an article I linked below. Check them out for yourself and let me know if you find a better one!