dcsimg
www.webdeveloper.com
Results 1 to 10 of 10

Thread: Vertically centerring blocks

  1. #1
    Join Date
    Dec 2002
    Location
    Perth, Western Australia
    Posts
    55

    Vertically centerring blocks

    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?

  2. #2
    Join Date
    Nov 2002
    Posts
    984
    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.

  3. #3
    Join Date
    Nov 2002
    Posts
    631
    position:absolute;
    top:50%;
    left:50%;

  4. #4
    Join Date
    Nov 2002
    Location
    NY, USA
    Posts
    731
    That will center the top and left corner, leaving the actual content in the bottom right.

  5. #5
    Join Date
    Dec 2002
    Location
    Perth, Western Australia
    Posts
    55
    Is there any special reason why there is no vertical centerring, or is the W3C just being lazy?

  6. #6
    Join Date
    Nov 2002
    Location
    NY, USA
    Posts
    731
    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).

  7. #7
    Join Date
    Nov 2002
    Posts
    984
    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.

  8. #8
    Join Date
    Nov 2002
    Location
    NY, USA
    Posts
    731
    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?

  9. #9
    Join Date
    Nov 2002
    Posts
    984
    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."
    Last edited by Stefan; 12-23-2002 at 09:42 AM.

  10. #10
    Join Date
    Nov 2002
    Posts
    631
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles