SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Uithoorn, Netherlands
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal & Vertical Center Positioning

    Hi Guys & Gurls!!

    I need some help!

    I want to center a div (with border and contents) horizontal and vertical. How do i do this, everything i try doesn't work!

    Greetz,

    Ron

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

    Vertical centering is a bit awkward in CSS unless you are using tables etc.

    Here's a routine that works in cases where you know the width and height of the element.
    Code:
    <style type="text/css" media="screen">
    html,body {
    height: 100%; 
    }
    .central {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -xxpx; /* where xx = half your elements height */
    margin-left: -xxpx; /* where xx= half your elements width */
    }
    </style>
    The above will centre horizontally and vertically

    To just centre horizontally you can use margin-left:auto and margin-right:auto on an element that has a width specified. However you will need to add a text-align:center for ie5 /5.5 to the parent of this element for that browser to centre.

    Hope that helps.

    Paul

  3. #3
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Uithoorn, Netherlands
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thnx Paul!

    It works very well! I hope it keeps on working

    Greetz,

    Ron


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
  •