SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    vertically center positioned

    Hi

    I was wondering how to make something (for example, an image) automatically position in the center of a div, vertically as well as horizontally?

    For horizontal, it is "margin:0 auto;"

    How to position automatically in the middle, vertically? If the outer div, in which the image is to be placed, has variable height and width.

    Thanx

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    This article by Paul O'Brien shows how to do it with a fixed height:
    http://www.pmob.co.uk/pob/hoz-vert-center.htm

    At the bottom of the page, he links to an example where height is not fixed:
    http://www.pmob.co.uk/pob/hoz-vert-center2.htm

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Here's another method that vertically aligns the horizontal content in relation to each other (but not necessarily with the parent outer as in the example that Ralph has linked to).

    Vertical centring is awkward if you want older browser support. Modern browsers (IE8+, Firefox, Safari etc..) can all use the display:table properties and can vertically center quite easily.

  4. #4
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your help guys.


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
  •