Margin:0 auto; not working

HTML & CSS
1

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

Hi,
Auto margins only work when a width has been set. :wink:

3

well, the image does have a width set… no, the answer is give them display:block; :wink:
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

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 :slight_smile:

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

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

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

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

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

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 :slight_smile:

9

yep… that makes more sense… thank you…