4

i have a problem properly vertical-align my images. I have div container with a height and line-height of 40px. Inside there is another div containing 2 img and one span. The images' height is set to 30px so the images are scaled down.

The vertical-align property of the img is set to middle. However the generated offsets are 8px on top and 2px on the bottom - in Firefox as well as in Chrome. If i set the vertical-align property to top or baseline the images are on the top edge, setting it to bottom moves them to the bottom (no spacing at all).

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

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

Hope you can help! Thanks!

Community
  • 1
  • 1
patman
  • 2,780
  • 4
  • 30
  • 54
  • Have you tried this solution? - http://www.jakpsatweb.cz/css/css-vertical-center-solution.html – klewis Mar 12 '13 at 13:09
  • Thank you, but i'd rather use another solution aso there may text without a dom-node inside the div. I thought using line-height and vertical-align: middle should do the trick. – patman Mar 12 '13 at 13:15
  • I could be wrong but I think what you are trying to get to...is making sure the assets are vertically aligned within their parent elements, and if that is the case, then either positioning or padding and margin settings are a good norm to use for aligning up child items inside containers, espcially images. – klewis Mar 12 '13 at 14:07
  • Even if you put text inside your parent element, its always a good idea to wrap that text with some kind of element, such as with a p tag. In either case, it's normative to manage the objects alignment and physical location, relative to it's parent container, with positioning, padding and margins. You have a lot of flexibility here. – klewis Mar 12 '13 at 14:15

3 Answers3

1

The 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

klewis
  • 7,459
  • 15
  • 58
  • 102
1

I would use the "vs" span to expand the height to 100% and make images align to middle. Also, I wouldn't try to align both parent containers to the desired height but only one of them to avoid extra padding or margin conflicts. Have a look at this demo: http://jsfiddle.net/NcrGF/1/

otinanai
  • 3,987
  • 3
  • 25
  • 43
  • Sorry i may have caused a little confusion. Inside my parent `#test` should resize more than just one `.section` element. I tried to use some of your thoughts, but no success. FYI if i do not explicitly set the `.section` `height` attribute the `.section` is rendered with a height of `43px` which also seems to be the base for the `vertical-align` calculation even with another `width` and `line-height` set. Anyway i couldn't get why it is `43px`, the inspector wasn't able to provide that information ;-) – patman Mar 12 '13 at 15:16
  • I don't think my suggestion has any of the limitations that you mention. See this demo with multiple `.section` containers. You just need to transfer styling of `.section` to `#test`. Demo: http://jsfiddle.net/NcrGF/6/ – otinanai Mar 12 '13 at 17:43
0

Okay thank you guys for your help. I figured it out. The problem was the line-height property. Giving either the parent container #test or the inside .section a line-height caused the miscalculation. If i assign the line-height to the span instead everything seems to render just fine.

patman
  • 2,780
  • 4
  • 30
  • 54