CSS: Center text both horizontal and vertical?

Somehow, there's still no standard for doing this, but in my experience the following is probably the most reliable solution overall: 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%; /* adjust this as needed */ left:0; width:100%; text-align:center; } #container { position:relative; height:200px; border:1px solid #000; } It looks good when you're demonstrating something simple like "" but line-height breaks horribly when the text wraps.

Somehow, there's still no standard for doing this, but in my experience the following is probably the most reliable solution overall: Here's another technique that utilizes relative and absolute positioning to simulate centered-middle position. This technique is not exact, but it should be compatible with any browser (even the early ones): Important note: When this question gets asked someone always seems to suggest line-height as a solution, but I would implore you to steer clear of that suggestion. It looks good when you're demonstrating something simple like "" but line-height breaks horribly when the text wraps.

Should note that table-cell method does not work in certain versions of IE. – Sparky672 Nov 18 at 18:35 thanks, helped alot :) – user1054396 Nov 18 at 18:42 No problem. Don't forget to mark the answer if you're satisfied.

– James Johnson Nov 18 at 18:49.

HOW TO HORIZONTALLY CENTER A BLOCK ITEM (LIKE A DIV) OR INLINE ITEM (LIKE TEXT) Let's say you wanted to center a document on a browser page, so that no matter how big you resize your browser the element is always centered: body { margin:50px 0px; padding:0px; text-align:center; } #Content { width:500px; margin:0px auto; text-align:left; padding:15px; border:1px dashed #333; background-color:#eee; } write this HTML for centering something horizontally in between your body tags: I am a centered DIV This will horizontally center block level elements. To center text, spans, or other inline elements all you would need to add is: #Content { width:500px; margin:0px auto; text-align:center; /* THIS IS THE ONLY CHANGE FROM ABOVE */ padding:15px; border:1px dashed #333; background-color:#eee; } HOW TO VERTICALLY CENTER A BLOCK ITEM (LIKE A DIV) OR INLINE ITEM (LIKE TEXT) Note: Do not use line-height to vertically center elements, as it will only work for one line of text and nothing more. As for vertically centering items, there are 3-5 methods you can use depending on what it is you are trying to center.

This site describes each method easily for you: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ Best of luck!

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.

Related Questions