I have a <p> inside a <div>. The <div> has a fixed height.
I want to center the <p> vertically within the <div> and
margin: auto 0;
doesn't work. (Tested in IE)
How may this task be accomplished?
Not all browsers are good. Some of them go bad.
Not long ago, one of them went as bad as you can go. His hame was I.. I... Well, people usually say that he is a browser That Must Not Be Named.
That browser killed many of our best coding conventions. It twists features. It knows how to counter-bug any of our designs. It is in possesion of a group of supporters so large that no other browser may stand up to it and live.
But now there is a hope.
Is there any special reason why there is no vertical centerring, or is the W3C just being lazy?
Not all browsers are good. Some of them go bad.
Not long ago, one of them went as bad as you can go. His hame was I.. I... Well, people usually say that he is a browser That Must Not Be Named.
That browser killed many of our best coding conventions. It twists features. It knows how to counter-bug any of our designs. It is in possesion of a group of supporters so large that no other browser may stand up to it and live.
But now there is a hope.
Actually there is: [ http://www.w3.org/TR/REC-CSS2/visude...vertical-align ]
And it does seem to work correctly in table cells. Other block elements, including DIV, seem to ignore it, though. The W3C has done their part, now we're just waiting on the browsers (like always).
Originally posted by jeffmott
[B]Actually there is: [ http://www.w3.org/TR/REC-CSS2/visude...vertical-align ]
And it does seem to work correctly in table cells. Other block elements, including DIV, seem to ignore it, though.
And that is exactly how it's supposed to be
The following values only have meaning with respect to a parent inline-level element, or to a parent block-level element, if that element generates anonymous inline boxes; they have no effect if no such parent exists.
Note. Values of this property have slightly different meanings in the context of tables. Please consult the section on table height algorithms for details.
The following values only have meaning with respect to a parent inline-level element, or to a parent block-level element
I must have misinterpreted it. I took this simply to mean that the content would be aligned relative to its immediate container. Specifically what effect does vertical-align have on block and inline content then? In what other context does vertical-align behave as it might be expected?
Originally posted by jeffmott
Specifically what effect does vertical-align have on block and inline content then?
It determines where (verticaly) on a line eg an image or text is placed.
Eg compair 3 textpieces placed next to each other with different vertical alignment
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
</head>
<body>
<p style="font-size:20px;border:1px solid green;">
normal
<span style="font-size:10px;vertical-align:bottom;border:1px solid blue;">bottom</span>
<span style="font-size:10px;vertical-align:baseline;border:1px solid blue;">base</span>
<span style="font-size:10px;vertical-align:super;border:1px solid blue;">super</span>
<br>
normal
</p>
<p style="font-size:20px;border:1px solid green;">
normal
<span style="font-size:10px;vertical-align:bottom;border:1px solid blue;">bottom</span>
<span style="font-size:10px;vertical-align:baseline;border:1px solid blue;">base</span>
<span style="font-size:10px;vertical-align:super;border:1px solid blue;">super</span>
</p>
</body>
</html>
In short, normally vertical-align only is relative the "text row"(linebox) it's on. However <td> is a special case where the value middle "The center of the cell is aligned with the center of the rows it spans."
Reply With Quote
Bookmarks