SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Centering

  1. #1
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)

    Centering

    I've seen people center various elements (mainly divs) using two syntaxes:

    Code:
    margin:0 auto;
    
    and
    
    margin:auto auto;
    Which way is the better way?

    ~TehYoyo

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    It honestly doesn't matter. In the specs, it's specified that if "auto" is the value for top/bottom margin it automatically becomes 0. So it's just easier to type margin:0 auto;.

    When you say margin:auto auto;, that can be shortened to margin:auto; (one value for margin specifies that value for all 4. top, right, bottom, left)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    So will that vertically center the element as well? (as it has margins for all 4?)

    ~TehYoyo

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    If only it were that simple . Vertical centering with CSS isn't as easy as setting vertical margins. There are a variety of other ways to do it however. Such as display:inline-block, display:table-cell (and the actual <table> HTML), and some mix of position:absolute trickery.

    The display:table-cell isn't usable much right now due to IE7 still being here (though if you don't care about that, by all means use it). I prefer to use display:inline-block (and advocate it over table-cell for now, until IE7 dies).
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by RyanReese View Post
    If only it were that simple . Vertical centering with CSS isn't as easy as setting vertical margins. There are a variety of other ways to do it however. Such as display:inline-block, display:table-cell (and the actual <table> HTML), and some mix of position:absolute trickery.

    The display:table-cell isn't usable much right now due to IE7 still being here (though if you don't care about that, by all means use it). I prefer to use display:inline-block (and advocate it over table-cell for now, until IE7 dies).
    Well logically, if we have a defined height auto margins should be the way to go?

    Is it because it's usually a bad idea to have a defined height?

    ~TehYoyo

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Vertical auto margins are automatically calculated to 0 when set. You simply can't center vertically using that method. Logically it should work because of it working with width, but it doesn't work like that .

    It's bad to have a defined height (in most cases, aka content) but that's not why you shouldn't resort to auto margins for vertical centering . They just don't work!
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Vertical auto margins are automatically calculated to 0 when set. You simply can't center vertically using that method. Logically it should work because of it working with width, but it doesn't work like that .

    It's bad to have a defined height (in most cases, aka content) but that's not why you shouldn't resort to auto margins for vertical centering . They just don't work!
    Gotcha. I can't foresee many times when I would have to vertically center...maybe in table cells, but it seems to be done automatically anyways (at least for TH tags).

    ~TehYoyo


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
  •