[css-d] vertical-align on inline-block
I had read in several articles that using display:inline-block is a way to vertically align block elements, but this doesn't seem to be working for me (at least in Chrome): div class=wrapper style=vertical-align: bottom; height: 100px div class=inner style=vertical-align: bottom; display: inline-block Hello /div div class=inner style=vertical-align: bottom; display: inline-block world /div /div Why doesn't this bottom-align the inner divs? I'm aware of display:table and of various hacks to get vertical alignment, but I'm mainly curious about this particular technique. Thanks in advance. -- Yang Zhang http://www.mit.edu/~y_z/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] vertical-align on inline-block
I had read in several articles that using display:inline-block is a way to vertically align block elements, but this doesn't seem to be working for me (at least in Chrome): div class=wrapper style=vertical-align: bottom; height: 100px div class=inner style=vertical-align: bottom; display: inline-block Hello /div div class=inner style=vertical-align: bottom; display: inline-block world /div /div Why doesn't this bottom-align the inner divs? I'm aware of display:table and of various hacks to get vertical alignment, but I'm mainly curious about this particular technique. Thanks in advance. -- Yang Zhang http://www.mit.edu/~y_z/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] vertical-align on inline-block
2010/3/28 Yang Zhang yanghates...@gmail.com: ... div class=wrapper style=vertical-align: bottom; height: 100px div class=inner style=vertical-align: bottom; display: inline-block Hello /div div class=inner style=vertical-align: bottom; display: inline-block world /div /div Why doesn't this bottom-align the inner divs? ... It does. vertical-align affects the vertical positioning inside a line box of the boxes generated by an inline-level element. The line box made by your inner div's is not as tall as the fixed-height container. Something that stretches the line box to the container is needed: div class=opener style=height:100%; width: 0; display: inline-block/div __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
