Horizontal and vertical center text in html [duplicate]
I have a div with a background image that needs to be centered horizontally and vertically. On top of that image, I also want to display a 1-line text, also centered horizontally and vertically.
I managed to get the image centered, but the text is not centered vertically. I thought vertical-align:middle would do the trick.
Here's the code I have:
<div style="background: url('background.png') no-repeat center; width:100%; height:100%; text-align:center;">
<div style="color:#ffffff; text-align: center; vertical-align:middle;" >
Some text here.
</div>
</div>
Any ideas?
Workaround: I actually got this to work by using a table. (I'll probably be cursed to hell by the HTML community.) Is there any significant reason not to use this btw? I'm still interested in the solution using divs though.
<table width="100%" height="100%">
<tr>
<td align="center" style="background: url('background.png') no-repeat center; color:#ffffff;">Some text here.</td>
</tr>
</table>
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
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. How to vertically center a div for all browsers?
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.
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>
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">
on IE7, FF 3.6, SAFARI 4.0.4
加载中,请稍侯......
精彩评论