vertical-alignment

When appending div s to a div with a fixed height, the child divs will appear from top to bottom, sticking at the top border. ┌─────────────────────────┐ │ Child Div 1 │ │ Child Div 2 │ │ │ │ │ │ │ └─────────────────────────┘ I'm now trying to display them from bottom to top like this (sticking to the bottom border): ┌─────────────────────────┐ │ │ │ │ │ │ │ Child Div 1 │ │ Child Div 2 │ └─────────────────────────┘ ┌─────────────────────────┐ │ │ │ │ │ Child Div 1 │ │ Child Div 2 │ │ Child Div 3 │ └─────────────────────────┘ ┌───────────────────────┬─┐ │ Child Div 2 │▲│ │ Child Div 3 │ │ │

I have the following HTML: <div class="outer"> <div class="inner rotate">Centered?</div> </div> div.outer is a narrow vertical strip. div.inner is rotated 90 degrees. I would like the text "Centered?" to appear centered in its container div. I do not know the size of either div in advance. This comes close: http://jsfiddle.net/CCMyf/2/ . You can see from the jsfiddle that the text is vertically centered before the transform: rotate(-90deg) style is applied, but is somewhat offset after. This is particularly noticeable when div.outer is short. Is it possible to center this text vertically

How do I assign vertical center alignment to the text inside a TextBlock? I found TextAlignment property but it is for horizontal text alignment. How do I do it for vertical text alignment? A Textblock itself can't do vertical alignment The best way to do this that I've found is to put the textblock inside a border, so the border does the alignment for you. <Border BorderBrush="{x:Null}" Height="50"> <TextBlock TextWrapping="Wrap" Text="Some Text" VerticalAlignment="Center"/> </Border> Note: This is functionally equivalent to using a grid, it just depends how you want the controls to fit in

According to the spec , the default value of vertical-align is baseline . baseline Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline. However, when it comes to table cells ( td ) it appears the default value is always middle . middle Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent. I would like official confirmation of this behavior, but I can't find anything in W3C documentation. Everything I've found says the default

Relative to the page, horizontal alignment in CSS is easy - a margin:0 auto gets you by much of the time, and a text-align:center for some other cases. My question to the gurus is not how to vertically align, but why is it so much more difficult? Why isn't there margin:auto 0 ? I mean, from a programming perspective. Theoretically, it seems like the same algorithms would apply to both types of centering. Good question and I don't know, but I would suspect the root of the problem is going to lie in HTML and therefore it's rendering engines being originally intended for document semantics as

Because examples rule: http://jsfiddle.net/rudiedirkx/wgue7/ How do I get the bars to the bottom instead of the top? Now they're sticking to the top of the container ( #bars ) but I want them sticking to the bottom. As you can see, I don't know the height of the highest bar, so I don't know the height of the container. These q+a don't help: Vertically align floating divs , Vertically align floating DIVs Should be simple, right? If it helps: it only has to work in decent browsers. PS. Number of bars is variable (not in the example) and their heights are. Only their widths are static.