Geek Answers Handbook

Incorrect vertical alignment offset: middle image

I have a problem with vertical alignment of images. I have a div container with a row height and height of 40 pixels. Inside there is also a div containing 2 img and one span . The image height is set to 30 pixels, so the images are reduced.

The vertical alignment property img set to average. However, the generated offsets are 8px at the top and 2px at the bottom - in Firefox, as well as in Chrome. If I set the vertical alignment property to top or baseline , the images are on the top edge, setting it to bottom moves them down (without an interval).

I tried to find a way to align them correctly without additional markup, but I cannot find anything. I also tried the solution for How to vertically align an image inside a div , but I had no luck with that.

I created jsfiddle to illustrate the problem: http://jsfiddle.net/pbQDS/

Hope you can help! Thanks!

+4
source share
3 answers

CSS:

 #test { position:relative; width: 980px; margin: 20px auto 10px auto; padding:0; position: relative; background: #7B0000; border:solid 1px blue; } #test .section { display:block; position:relative; padding:10px 0; margin:0; } #test .section:last-child { float: none; } #test .section:first-of-type { padding-left: 180px; } #test img { padding:0; margin:0; display:inline-block; height:30px; vertical-align: middle; position:relative; top:50%; } #test .section span {position:relative; left:3px; top:50%; display: inline-block;} }

My jsfiddle demo

+1
source

I would use the "vs" span to increase the height to 100% and make the images aligned to the middle. In addition, I would not try to align both parent containers with the desired height, but only one of them to avoid padding or margin conflicts. Take a look at this demo: http://jsfiddle.net/NcrGF/1/

+1
source

Ok, thanks guys for your help. I understood. The problem was the line-height . Providing either the parent container #test or inside .section a line-height caused a miscalculation. If I assign line-height to span , instead everything seems to look just fine.

0
source

More articles:


All Articles