Why margin:auto doesn't work?

Question

I want to center my element but when I use

margin-left: auto;
margin-right: auto;

it doesn't work!

this is my html

<section id="t">
    <article class="tc">Hi</article>
    <article class="tc">Hi agian!</article>
</section>

and this is my css:

#t {
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
}
.tc {
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    display: inline;
    border-style: solid;
    border-width:1px;
}

and you can see the result here.

Can anybody help me?

Ah, the age old question of how to center dynamically-wide content in browsers... First of all: `display: inline` is going making the browser ignore width and margin styles on `.tc` — Bob Fincheimer, Feb 07 '13 at 16:40
@BobFincheimer So how can I have two elements in one line in center of screen? — ahmadali shafiee, Feb 07 '13 at 16:52
This is very hard to do this consistently across browsers [especially older ones]. If you target newer ones there are plenty of simple solutions, just google it — Bob Fincheimer, Feb 07 '13 at 17:31

score 37 · Answer 1 · edited Jul 06 '15 at 17:03

37

margin-left: auto;
margin-right: auto;

would not effect the element width display:inline.

If your want it works, you should give a fixed width, and set display:block or display:inline-block.

edited Jul 06 '15 at 17:03

Lior Elrom

19,660
16
80
92

answered Feb 07 '13 at 16:40

pktangyue

8,326
9
48
71

1

If you don't know the element width, set the element container `text-align` to `center` – Lior Elrom Jul 06 '15 at 17:07
1

Could you cite a source for this? In MDN, the *fixed* width requirement was not mentioned, and everybody seems to favor flexbox today. – Minh Nghĩa Dec 08 '21 at 06:48
In the [spec for computing margin](https://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#inline-width), it is stated outright for inline elements that their margins of `auto` will become `0`. The "fixed" part is not mentioned. – Minh Nghĩa Dec 08 '21 at 07:16

score 15 · Answer 2 · answered Feb 07 '13 at 16:39

15

For margin auto to work you need to have a width on the item.

#t { width: some-width; }

http://jsfiddle.net/2sagZ/7/

answered Feb 07 '13 at 16:39

jsweazy

1,623
9
22

1

Anything with margin: auto needs a width. In your updated example just give `header` a width – jsweazy Feb 07 '13 at 20:29

score 3 · Answer 3 · answered Feb 07 '13 at 16:38

3

You're displaying your articles inline. Only block elements can be centered by setting their margins to auto. So you need to make them block level elements for margin: auto to work.

Your main section tag has a width of 100% by default. So you can't center it if it already fills the screen. So you need to make the width less then 100% for margin: auto to work.

answered Feb 07 '13 at 16:38

John Conde

217,595
99
455
496

and how can I show them in a line. I want them in a line in center of the page – ahmadali shafiee Feb 07 '13 at 16:40
1

Technically it *is* centered if it already fills the screen, since the side margins are both zeroed out equally :P – BoltClock Feb 07 '13 at 16:40

MrPink · Answer 4 · 2013-02-07T17:08:25.843

2

CSS

body{
    width:100%;
}

#t {
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
    width:600px;
}
.tc {
    display:inline;
    border-style: solid;
    border-width:1px;
}

HTML

<body>
<section id="t">
    <article class="tc">Hi</article>
    <article class="tc">Hi agian!</article>
</section>
</body>

is that wat you want?

http://jsfiddle.net/ahmadalli/2sagZ/5/

edited Feb 07 '13 at 17:08

answered Feb 07 '13 at 16:42

MrPink

1,325
4
18
27

No! I want to element in a line in center of the page! – ahmadali shafiee Feb 07 '13 at 16:46
then remove the width from the #t and it should fall in line. What exactly are you trying to achieve with this html? – MrPink Feb 07 '13 at 17:01
.tc { border-style: solid; border-width:1px; } – MrPink Feb 07 '13 at 17:02
please see corrected html/css. i think this is what you want – MrPink Feb 07 '13 at 17:08
[this](http://jsfiddle.net/ahmadalli/ApMNZ/) is what you said! this isn't what I want! – ahmadali shafiee Feb 07 '13 at 17:40

score 1 · Answer 5 · answered Feb 07 '13 at 16:52

1

if you are using inline styling you can just use text-align: center

http://jsfiddle.net/3MJEm/

#t {
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
    text-align:center;
}

answered Feb 07 '13 at 16:52

keeg

3,990
8
49
97

take a look at [this](http://jsfiddle.net/ahmadalli/3MJEm/1/) they should be separated – ahmadali shafiee Feb 07 '13 at 16:56

Landon · Answer 6 · 2013-02-07T16:49:49.063

0

You could try giving the width a percentage, like width: 75%;. I would also give positioning to the divs, I recommend using relative.

edited Feb 07 '13 at 16:49

answered Feb 07 '13 at 16:38

Landon

65
1
7

score 0 · Answer 7 · answered Feb 07 '13 at 16:39

0

#t needs a width in order to be centered.

The articles won't be centered when set to display:inline.

answered Feb 07 '13 at 16:39

gotohales

3,665
1
20
34

@ahmadalishafiee In this case #header needs a width. – gotohales Feb 07 '13 at 20:01
Ok. that problem resolved but this didn't! – ahmadali shafiee Feb 07 '13 at 20:31

score -1 · Answer 8 · edited May 21 '14 at 19:45

-1

#t {
margin: auto;
margin-top:10px;
width: 84px; 
}
.tc {
display: inline;
border-style: solid;
border-width:1px;
}

edited May 21 '14 at 19:45

Flexo

87,323
22
191
272

answered May 20 '14 at 20:35

Ali Asgari

95
1
8

Why margin:auto doesn't work?

8 Answers8

Linked