ansaurus

Question

Horizontal and vertical center text in html

Answer 1

+1 A:

there is no direct vertical centering for div content in CSS, however there are indirect ways of achieving it. http://phrogz.net/CSS/vertical-align/index.html

also many similar questions in SO. http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css

Iraklis 2010-03-23 09:05:20

The 'correct' way to do it depends on how much text you are going to have. If you know what's going to be there, then it becomes much easier.

Blair McMillan 2010-03-23 09:08:43

I only have 1 line of text to show.

Christophe Herreman 2010-03-23 09:11:25

Answer 2

+2 A:

Horizontal centering of a block element is traditionally done this way:

div.inner { margin: 0 auto; }

Note: the above won't work with IE in quirks mode so always put a DOCTYPE at the top of your document to force it into standards compliant mode.

Vertical centering is much more tedious. See Vertical Centering in CSS

cletus 2010-03-23 09:06:27

@cletus: the inner div has to specify a certain width to get centered i.e. "width: 300px;"

Marco Demajo 2010-05-18 15:16:12

Answer 3

A:

Without using javascript (ala something like thickbox, etc. for positioning photos/captions centered), the closest I could come to was this:

<body style="height:200px; min-height:800px;">
   <div style="background: url('background.png') no-repeat center; height:100%;">
      <div style="text-align: center; position:relative; top:50%; color:#fff;">
         Some text here.
      </div>
   </div>
</body>

Note that I had to specify some sort of height for the container (in this case the BODY but it could also have been applied to the wrapper DIV I think). In Explorer 6, you can set the BODY height to 100% but in Firefox this doesn't work and probably won't work in other modern browsers.

EDIT:

Found a better solution:

<style type="text/css">
    html, body {height:100%;}
</style>
</head>
<body>
    <div style="background: url('background.png') no-repeat center; height:100%;">
        <div style="text-align: center; position:relative; top:50%; color:#fff;">
            Some text here.
        </div>
    </div>
</body>

Todd 2010-03-23 14:23:47

Answer 4

A:

In case you have to use only one line of text and parent div has fixed height use line-height property. Suppose parent height is 500px then use CSS line-height: 500px; for text.

Katie Rosy 2010-03-24 12:13:07

Answer 5

A:

If you want to get VERTICAL centering, I would suggest to use a table inside the DIV (as suggested by Cletus above other ways might be tedious).

div.centered table {margin: 0 auto;} /* no width needs to be specified for table */
div.centered table td {vertical-align: middle;} /* replace this with vertical-align: top; to disable vertical centering */


<!-- borders added only to help understanding -->
<div class="centered" style="border: 1px solid #cccccc;">
    <table style="border: 1px solid #ff0000;">
       <tbody>
          <tr><td>
             Some text here
          </td></tr>
       </tbody>
    </table> 
</div>

If you are only interested in HORIZONTAL centering (no vertical) you can use only DIV:

div.centered div {margin: 0 auto; width: 300px;} /* some width MUST be specified to center a DIV. */

<!-- borders added only to help understanding -->
<div class="centered" style="border: 1px solid #cccccc;">
    <div style="border: 1px solid #ff0000;">
       Some text here
    </div> 
</div>

As you might have noticed in order to horizontally align a DIV inside a DIV you also need to specify a fixed width for the inner DIV. This might be somehow not what you want to do, so it might be easier to use always the 1st solution (the one with TABLE) and simply remove the "vertical-align: middle;" when you want to get only horizontal centering.

I tested this using document with:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;

on IE7, FF 3.6, SAFARI 4.0.4

Marco Demajo 2010-05-18 13:32:57

ansaurus

tags:

views:

answers:

Horizontal and vertical center text in html

related questions