Vertically centering a span in a div?

Vertical alignment is a tricky business, and I don't know if there's one tried-and-true way. The most reliable technique available in the last couple of years is to use a CSS table layout. The only downside to this approach is that it may not work on outdated browsers.

Still, in my experience this is probably the best overall solution. See my example below: style type="text/css"> #container { display:table; border-collapse:collapse; height:200px; width:100%; border:1px solid #000; } #layout { display:table-row; } #content { display:table-cell; text-align:center; vertical-align:middle; } #vertical{ position:absolute; top:50%; left:0; width:100%; text-align:center; } #container { position:relative; height:200px; border:1px solid #000; }.

Vertical alignment is a tricky business, and I don't know if there's one tried-and-true way. The most reliable technique available in the last couple of years is to use a CSS table layout. The only downside to this approach is that it may not work on outdated browsers.

Still, in my experience this is probably the best overall solution. See my example below: Here's a jsFiddle: jsfiddle.net/aGKfd/2/ There's another technique, but it's not as foolproof as the above technique. It involves two containers, with the outer container's position set to relative and the inner set to absolute.

Using absolute positioning on the inner container you can get close, but it requires some tweaking to get it just right: Here's a jsFiddle: jsfiddle.net/6SWPe.

I didn't downvote you, but your second example only vertically centers the top of the #vertical box, not the box as a whole. – Ben Nov 10 at 21:07 -1. Top 50% - not center.

You need to - margin-top = height /2 – Taras Neporozhniy Nov 10 at 21:09 1 so don't downvote my solution if YOUR solution ALSO not perfect ;) – Taras Neporozhniy Nov 10 at 21:20 There are no perfect solutions for this particular problem, but my top solution is about as good as it gets. – James Johnson Nov 10 at 21:21 @TarasNeporozhniy: You have to remember that this is not about you or me, it's about the asker. I didn't downvote your answer because I don't like you.

I downvoted it because line-height is not a good solution. When you're talking about content like " world" and what not it's easy to be fooled, but as soon as real content enters the equation, line-height drops a huge bomb. – James Johnson Nov 10 at 21:22.

Add this to the div CSS: display:table-cell; text-align:center working fiddle is here: jsfiddle.net/sdoking/DCT85/ CSS: #myDiv { border:1px solid black; height:50px; width:200px; vertical-align:middle; display:table-cell; text-align:center } #mySpan { width:100%; border:thin blue solid } Borders are for clarity :).

This is fine but not compatible with some browsers (some popular versions of IE, for example). You can see more about vertical centering here: jakpsatweb. Cz/css/css-vertical-center-solution.

Html – David Brainer-Banker Nov 10 at 20:58 This could work, but it does not vertically align. – James Johnson Nov 10 at 21:06 This is in addition to his current CSS which includes the vertical-align:middle already - see the fiddle – sdo Nov 10 at 21:23 You've lucked out with the downvotes, but this latest edit treads dangerously close to my first solution. – James Johnson Nov 10 at 21:31 Well.. except I posted my solution 3 minutes before yours?

All I did in my edit was move the code out of the fiddle and into the post. – sdo Nov 10 at 21:34.

1 line-height will break if the text exceeds one line. – James Johnson Nov 10 at 21:06 +1 downvote pls :) – Taras Neporozhniy Nov 10 at 21:43.

You can also just apply these styles to the containing . The line-height solution assumes you only need one line of text to be centered though. #myDiv{ border:1px solid black; height:50px; width:200px; text-align:center; line-height:50px; }.

1 -1: line-height will break if the text exceeds one line. – James Johnson Nov 10 at 21:06 One line may be all that's needed – Ben Nov 10 at 21:10 That's a dangerous assumption to make. There are many variables that could effect this solution: changes in resolution, shrinking the window size, etc.– James Johnson Nov 10 at 21:15 Not when you're hard-coding your dimensions, as the OP did in his fiddle.

– Ben Nov 10 at 21:17 1 In general, line-height is not a good solution for vertical alignment. I know that the options are limited, but when line-height breaks it really breaks. – James Johnson Nov 10 at 21:20.

Here it is #myDiv{ border:1px solid black; height:50px; width:200px; } #mySpan{ display:block; text-align:center; line-height:50px; } And the jsFiddle: jsfiddle.net/Simo990/RhNc2/9/ Edit: since your div and span height depends of the content, my solution will not work, because it needs fixed height and only one row of text. Just look for a solution with position:absolute.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.