...

View Full Version : Vertical-align problem



DarkLightA
03-04-2009, 06:22 PM
I have a little problem with the footer of my page:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/strict.dtd">

<html>
<head>
<title></title>
<style type="text/css">

#footer {
background: #006400;
clear: both;
width: 100%;
height: 5em;
}

#footer p {
vertical-align: middle;
}

.spaceout {
margin: 2em 2em;
}

</style>
</head>

<body>
<div id="footer">
<div class="spaceout">
<p>&copy; Me 2009. This page is entirely coded by me using XHTML and CSS.</p>
</div> <!-- spaceout -->
</div> <!-- footer -->
</body>
</html>


However, the paragraph in the footer doesn't appear in the middle of the it, but in the top, even though I use vertical-align: middle;. How can I align it to the middle, vertically?

BoldUlysses
03-04-2009, 06:28 PM
Use line-height:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/strict.dtd">

<html>
<head>
<title></title>
<style type="text/css">

#footer {
background: #006400;
clear: both;
width: 100%;
height: 5em;
}

#footer p {
height:5em;
line-height:5em;
}

</style>
</head>

<body>
<div id="footer">
<p>&copy; Me 2009. This page is entirely coded by me using XHTML and CSS.</p>
</div> <!-- footer -->
</body>
</html>

I don't know your intentions for the rest of the page but it doesn't seem like you need an extra containing div, as the paragraph tag works just fine as a block-level container for your text.

This is the best page (http://phrogz.net/CSS/vertical-align/index.html) on vertical centering in CSS that I've seen. Describes the two methods: line-height and negative margins.

DarkLightA
03-05-2009, 05:39 PM
Thank you!

- I'm just wondering though: How can I get vertical-align to work?

Thanks again,
-DarkLightA

Excavator
03-05-2009, 05:53 PM
Hello DarkLightA,
Your use of the XHTML Strict DocType indicates that your interested in coding your site with valid and current code. vertical-align:middle; is a deprecated HTML tag.
msuffern has shown you the proper way to do it and the link he gave you explains it very clearly, along with an optional method if line-height doesn't work for you (like if you were to end up with more than one line of text).

I'm not sure how to get vertical-align:middle; to work. I tried it here locally but even changing the doctype doesn't make it center your text. Maybe for that tag to work it needs to be in a table? Not a clue.

BoldUlysses
03-05-2009, 05:59 PM
Hi DarkLightA,

As the link (http://phrogz.net/CSS/vertical-align/index.html) describes, vertical-align doesn't actually do what you might expect it to do from the name; that is, align block-level elements (http://www.highdots.com/css-editor/html_tutorial/block.html) vertically with respect to their container.

What it does do is described in the
vertical-align in table cells
vertical-align on inline elements
subsections of the above link.

I understand it can be confusing. There is some truth to the statement


the CSS specification really screwed this one up (in my opinion)—vertical-align is used to specify two completely different behaviors depending on where it is used.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum