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?CSS doesn't have any "center this in the vertical middle" command.
You will have to work with paddings, margins, positioning, lineheight etc to acoplish the same effect.position:absolute;
top:50%;
left:50%;That will center the top and left corner, leaving the actual content in the bottom right.Is there any special reason why there is no vertical centerring, or is the W3C just being lazy?Actually there is: [ <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align">http://www.w3.org/TR/REC-CSS2/visudet.h ... ical-align</a><!-- m --> ]
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
Actually there is: [ <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align">http://www.w3.org/TR/REC-CSS2/visudet.h ... ical-align</a><!-- m --> ]
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."Originally posted by jeffmott
That will center the top and left corner, leaving the actual content in the bottom right.
I know. The person who wants this centered will have to fool around with the positioning.
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?CSS doesn't have any "center this in the vertical middle" command.
You will have to work with paddings, margins, positioning, lineheight etc to acoplish the same effect.position:absolute;
top:50%;
left:50%;That will center the top and left corner, leaving the actual content in the bottom right.Is there any special reason why there is no vertical centerring, or is the W3C just being lazy?Actually there is: [ <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align">http://www.w3.org/TR/REC-CSS2/visudet.h ... ical-align</a><!-- m --> ]
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
Actually there is: [ <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align">http://www.w3.org/TR/REC-CSS2/visudet.h ... ical-align</a><!-- m --> ]
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."Originally posted by jeffmott
That will center the top and left corner, leaving the actual content in the bottom right.
I know. The person who wants this centered will have to fool around with the positioning.