SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    San Jose
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to vertically align anything within a div?

    I created a layout for the header and I was trying to position my navigation links in the center of the div's height, if it is 120px.

    header.gif

    I used this following method but it's not cross browser compatible:

    #verticalalign_outer { position:relative; }
    #verticalalign_inner { position:absolute; top:50%; height:8em; margin-top:-4.6em; }

    <div id="verticalalign_outer">
    <p>text</p>
    <div id="verticalalign_inner">

    </div>
    </div>

    Thanks

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well verticalalign_inner doesn't have any content in it. Also the parent needs a height...take this code
    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="css/styles.css"rel="stylesheet" type="text/css">
    <style>
    #verticalalign_outer { position:relative; background:blue;padding:0 4px;height:300px;}
    #verticalalign_inner { position:absolute; top:50%; height:8em; margin-top:-4.6em; background:red;}
    </style>
    </head>
    
    <body>
    <div id="verticalalign_outer">
    <p>text</p>
    <div id="verticalalign_inner">
    asdf
    </div>
    </div>
    
    
    </body>
    </html>
    Works .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    If you have a fixed height and fixed height elements inside then you can just move them around with margins as everything is known.

    If you want an automatic vertical alignment of elements with unknown and various heights then it gets a little more complicated especially if full browsers support is required.

    Here's an old example but needs the extra markup for ff2 otherwise it could be simplified a little.

    If you wanted just IE8+ support then the display table properties could handle the vertical-alignment quite easily.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    San Jose
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the display table idea, it works. However I've tried everything to space the cell containing the navigation from the cell containing the logo.

    What should I do to make sure there's space between the logo and navigation? Thanks

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It depends on how your markup is. Couldy ou post your current code? Have you tried padding/margin to space the elements out?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    As Ryan said we would need to see the actula code you are using as I can think of a number of ways (widths, padding, margins) but all depend on teh exact structure concerned.


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
  •