Почему маржа: авто не работает?

Я хочу сосредоточить свой элемент, но когда я использую

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

он не работает!

это мой html

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

и это мой 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;
}

и вы можете увидеть результат здесь.

Может кто-нибудь мне помочь?

Ответы

Ответ 1

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

не будет влиять на ширину элемента display:inline.

Если вы хотите, чтобы он работал, вы должны указать фиксированную ширину и установить display:block или display:inline-block.

Ответ 2

Для автоматического использования маржи необходимо иметь ширину элемента.

#t { width: some-width; }

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

Ответ 3

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>

является то, что вы хотите?

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

Ответ 4

Вы показываете свои статьи в строке. Только элементы блока можно центрировать, установив их поля на auto. Поэтому вам нужно заставить их блокировать элементы уровня для margin: auto для работы.

По умолчанию ваш тег основного раздела имеет ширину 100%. Таким образом, вы не можете центрировать его, если он уже заполняет экран. Поэтому для работы margin: auto вам нужно сделать ширину менее 100%.

Ответ 5

Вы можете попытаться дать ширину в процентах, например, ширину: 75%;. Я бы также дал позиционирование divs, я рекомендую использовать относительный.

Ответ 6

#t требуется ширина для центрирования.

articles не будет центрироваться при установке display:inline.

Ответ 7

если вы используете стиль inline, вы можете просто использовать text-align: center

http://jsfiddle.net/3MJEm/

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

Ответ 8

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