SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: vertical-align

  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    vertical-align

    Do you know why this isn't this aligning vertically?

    PHP Code:
    <?php
    echo '<div style="float:left;width:60px;height:60px;vertical-align:middle;background-color:blue;">';
    echo 
    '<p style="vertical-align:middle;margin:0px;text-align:center;overflow:auto;font-weight:bold;font-size:16px;">Save 6.24</p>';
    echo 
    '</div>'//closes headline div
    ?>
    in-line css for question convenience.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    vertical-align: middle only works on inline elements (like images) or when you are using display: table. E.g.

    Code:
    <div style="display: table; float:left;width:60px;height:60px;background-color:blue;">
    <p style="display: table-cell;vertical-align:middle;margin:0px;text-align:center;overflow:auto;font-weight:bold;font-size:16px;">Save 6.24</p>
    </div>
    This won't work in versions of IE less than 8, but IMO IE7 and lower are dead donkeys now (like the people who still use them).

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks ralph.m

    Is there a reference for that explains the connection between display and vertical-align?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    I'm sure there are good references, and this will be explained in the CSS Specs themselves. See if these two pages help:

    http://reference.sitepoint.com/css/vertical-align

    http://reference.sitepoint.com/css/display


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
  •