SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2008
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Center an object

    Hi,

    this is my first post in this forum, just want to know how can I centre a image or an object using CSS?
    I mean centre as centre of the page not centre top or centre bottom. that means if the browser gets resized the object is still in the centre.

    Thanks
    Yizi

  2. #2
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    add this to your image or element:
    Code:
    class="center"
    And in your stylesheet place:
    Code:
    .center {
    margin:0 auto;
    }
    This will centre the element horizontaly.

    To align it vertically, have a look at the article Vertical Centering in CSS.
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It depends on the context, you could use text-align: center; on the parent although in most cases I'd tend to apply a width to the image and then use margin: 0 auto;

    Depends on the situation I'm dealing with though.

    Hope that helps.

  4. #4
    SitePoint Zealot
    Join Date
    Jan 2008
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wante the logo image to be centered exactly in the middle of the screen, that is, both vertically and horizontally. centered

  5. #5
    Now available in Orange Tijmen's Avatar
    Join Date
    Jul 2004
    Location
    The Netherlands
    Posts
    1,469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have a look at this post, How to centre horizontally and vertically?.
    Travel Photos on Flickr - Twitter

    “Never give up. Never surrender”

  6. #6
    SitePoint Zealot
    Join Date
    Jan 2008
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by Tijmen View Post
    That's what I was looking for!
    Thank you!


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
  •