SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Singapore
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need some help with { vertical-align }

    How exactly do i use this CSS property?

    vertical-align

    I tried something like

    <div style=" height:100px ; vertical-align:middle ">
    text here
    </div>

    But the text was still on top.

    --------------------
    http://www.geocities.com/machinegunsg/
    CastleVania : Messing Up Dracula's Turf

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    vertical-align only aligns INLINE elements, and table cells. A <div> is a block-level element. You can do something like this:
    Code:
    <div style="padding: 45px 0; font-size: 10px;">
    text here
    </div>
    Which will give the appearance of vertically aligning your <div> to the middle, but it's really just an equal amount of top and bottom padding.

  3. #3
    SitePoint Enthusiast Karst's Avatar
    Join Date
    Mar 2003
    Location
    UK
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    eom

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,
    How exactly do i use this CSS property?
    I know Vinnie has explained this already (and it won't help with you particular problem) but I thought it was worth an example for those who are still not sure what vertical_align does[img]images/smilies/wink.gif[/img].

    As mentioned by Vinnie vertical-align determines the alignment of text within a single line of text or within a table cell.

    (In a table cell the middle of the element will align with the middle of the cell.)

    When used in a line of text vertical-align will position the text with respect to other text on the same line.
    This inline layout model is quite complicated but this is the basics of it: For each piece of text an inline box is generated, using the content area (box defined by font-size for each piece of text) and the half leading ((font size -line height)/2) to arrive at it's final height. These boxes will always be centred vertically with respect to each other within the line unless another value is applied to vertical-align.

    Perhaps an example would be easier to explain it:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Inline layout model</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    .test {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    }
    .test span {
    font-size:12px;
    vertical-align:bottom
    }
    .test em {
    font-size:8px;
    vertical-align:top
    }
    -->
    </style>
    </head>
    <body>
    <div class="test">
    <p>Hello this is normal text <span>This text is lower down</span><em> and this text is higher up</em></p>
    </div>
    </body>
    </html>
    Some browers may not support all the values of vertical-align so testing is necessary.

    (Hope this is useful to someone.)

    Paul

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Singapore
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok...

    Thanks guys...

    Is there anyway to replicate this?
    <td valign="middle">

    Because i thought having a specified height and middle text makes for a good decoration when used with { background-image }......

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Is there anyway to replicate this?
    <td valign="middle">
    Yes
    Code:
    <td style="vertical-align:middle">
    But I don't think that was what you meant . I assume you meant without tables.

    Vinnie has given an easy solution above by just using padding to push your text down. There is also a command "display:table-cell" which will make an element behave like a table cell and allow vertical-align:middle to work. However it is not very well supported (IE doesn't support it so its not much use).

    Paul

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B
    However it is not very well supported (IE doesn't support it so its not much use).
    Well, IE supposedly supports it when it treats a document as XML, but not as HTML.

  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Singapore
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys.

    Well, looks like i have to drop my ideas......


Bookmarks

Posting Permissions

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