SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    margin:0 auto; not working...

    why is margin:0 auto; not working here?

    http://mayacove.com/misc/submit/test.html

    I thought it was b/c of the input type="image" but I also tried w/a plain image, it's not working either..

    thank you..

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Auto margins only work when a width has been set.

  3. #3
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Hi,
    Auto margins only work when a width has been set.
    well, the image does have a width set.. no, the answer is give them display:block; ;-)
    it works for the submit button even though no width is set (I guess b/c the image is of a specif. width.. not sure..)
    http://mayacove.com/misc/submit/test.html

    thank you for your response........

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    the answer is give them display:block;
    Right, I was on my way back to say that and I noticed you had already caught it

    You could have also just centered them with text-align:center on the parent div when they were in the default of display:inline;

    Code:
    div {text-align:center}
    #submit { } 
    #image { }

  5. #5
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    yes I know I can do text-align center, but well, prefer margin:0 auto; and also was wondering why it wasn't working..

    thank you..

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by maya90 View Post
    w
    it works for the submit button even though no width is set (I guess b/c the image is of a specif. width.. not sure..)
    Replaced elements such as images and some form controls have intrinsic width so when you set them to display:block auto margins will work because they have intrinsic width. Other elements need to be block level and also have a width defined.

  7. #7
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Replaced elements such as images and some form controls have intrinsic width so when you set them to display:block auto margins will work because they have intrinsic width. Other elements need to be block level and also have a width defined.
    yes, you're right of course.. was wondering why it works now for submit btn when it doesn't have width set, and it's the intrinsic width..

    as for display:block; -- I always forget that by default imgs are display:inline, which I think is a bit weird, I would think they'd be block elements by default, but they're not.. (this is why I always forget, b/c to me it makes more sense for them to be block elements by default..)

    thank you..

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Although they are inline default you can think of images and some form controls as being basically more like "inline-block" which means they get the best of both worlds to some degree

  9. #9
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Although they are inline default you can think of images and some form controls as being basically more like "inline-block" which means they get the best of both worlds to some degree
    yep... that makes more sense... 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
  •