PDA

View Full Version : Resolved Align text in center of div



Sman5109
Jan 19th, 2009, 01:46 AM
So I have a div with two lines of text in it. I have it centered horizontally normally but i dont know how to do it vertically.

Heres the css for my div:
#footer {min-height:62px; background:scroll #ebebeb url(images/footer.png) no-repeat right top; text-align:center; font-size:.7em;}

I have tried using line-height but that doesnt work with 2 lines. I tried using the display:table whatnot but that just compressed my div to the length of the text.

You guys know how to do this?

Thanks

Excavator
Jan 19th, 2009, 03:01 AM
Hello Sman5109,
You were on the right track with display table, you just need to do a little more.
Look at this example: http://nopeople.com/CSS/vertical%20center%20with%20CSS/index.html

Why the min-height: 62px; instead of just height: 62px?

Try it like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Comic Sans MS";
background: #FC6;
text-align: left;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}

#footer {
height:62px;
width: 100%;
margin: 100px 0 10px 0;
background:scroll #ebebeb url(images/footer.png) no-repeat right top;
text-align:center;
font-size:.7em;
display: table;
}
#footer p {
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="wrap">
<p>this is not the footer</p>
<div id="footer">
<p>this is the footer
<br />
second line of text</p>
</div>
<!--end wrap--></div>
</body>
</html>

Sman5109
Jan 19th, 2009, 04:32 AM
Well I had min-height so it was able to expand if needed sometime, but I guess display:table and min-height do not work together.

Thanks for the help, all works now :)

Excavator
Jan 19th, 2009, 03:24 PM
Well I had min-height so it was able to expand if needed sometime, but I guess display:table and min-height do not work together.

Thanks for the help, all works now :)

Have a look at this. Uses padding to give a little extra room when it's small but will continue expanding as you add more text. Seems to have some limitations but may work for you:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Comic Sans MS";
background: #FC6;
text-align: left;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}

#footer {
padding: 10px 0;
width: 100%;
margin: 100px 0 10px 0;
background:scroll #ebebeb url(images/footer.png) no-repeat right top;
text-align:center;
font-size:.7em;
display: table;
}
#footer p {
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="wrap">
<p>this is not the footer</p>
<div id="footer">
<p>this is the footer
<br />
second line of text
<br />
this is the footer
<br />
fourth line of text</p>
</div>
<!--end wrap--></div>
</body>
</html>