Forum Moderators: not2easy
There are a few things you need to understand about the vertical-align CSS property:
It was never meant to reproduce the valign attribute for tables. It doesn't affect how things are vertically aligned within the element itself. Instead, it aligns the element in reference to surrounding elements.
If you need something that reproduces valign=bottom, for example, then absolute positioning (with bottom set to 0) is what you need.
CSS was designed to allow for fluid layouts that gracefully adjust themselves to whatever basic rules you have set for the flow of the page.
CSS is a new way of thinking. You're not doing yourself a favor by trying to apply CSS to HTML thinking, trying to reproduce HTML behavior.
For example, I have created a small page with a 250x250px box in the center of the page (using some css trick). I put a paragraph in that box, and i'd like to have that paragraph vertically centered in the box. How would that be acheived using css?
here's the code:
<html>
<head>
<title>css test</title>
<style type="text/css">
body {
margin: 0px;
}
div#test {
background-color: #689475;
width: 250px;
height: 250px;
position: relative;
top: 50%;
left: 50%;
margin: -125 px;
}
p {
font-family: tahoma;
font-size: 12px;
color: #ffffff;
}
</style>
</head>
<body>
<div id="test">
<p>How can I make this paragraph vertically centered in the box?</p>
</div>
</body>
</html>
I came up with a very nasty hack that lets you take advantage of the fact that spans will vertical align with the text to the left of it. By setting the font-size of the DIV to the height of the DIV, you can use spans within the DIV and tell them to vertical-align:middle (but no other element type) But it causes all sorts of other problems and your needs and goals have to be simple.
Sorry. Google this to death, you'll see there is no easy answer. Most work-arounds require javascript, and you might as well use a table instead of that.
change this core of your code to see my nasty hack (but don't bother to use it in real-world)
div#test {
background-color: #689475;
width: 250px;
height: 250px;
position: relative;
top: 50%;
left: 50%;
margin: -125 px;
line-height:200px;
font-size:200px;
}.text {
font-family: tahoma;
font-size: 12px;
color: #ffffff;
vertical-align:middle;
line-height:100%;
}
</style>
</head><body>
<div id="test">
<span class=text>How can I make this paragraph vertically centered in the box?</span>
</div>
