23

要素を中央に配置したいのですが、

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;
}

ここで結果を確認できます。

誰か助けてもらえますか？

4

8 に答える 8

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

要素の幅には影響しませんdisplay:inline。

動作させたい場合は、固定幅を指定し、display:blockorを設定する必要がありdisplay:inline-blockます。

于 2013-02-07T16:40:50.697 に答える
13

マージンオートが機能するには、アイテムに幅が必要です。

#t { width: some-width; }

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

于 2013-02-07T16:39:34.570 に答える
2

記事をインラインで表示しています。マージンをに設定すると、ブロック要素のみを中央に配置できますauto。したがって、機能させるには、それらをブロックレベルの要素にする必要がありますmargin: auto。

メインセクションタグの幅はデフォルトで100％です。そのため、すでに画面いっぱいに表示されている場合は中央に配置できません。したがって、機能するには幅を100％未満にする必要がありますmargin: auto。

于 2013-02-07T16:38:21.390 に答える
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>

それはあなたが欲しいものですか？

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

于 2013-02-07T16:42:07.177 に答える
1

スタイリングを使用している場合は、inlineそのまま使用できますtext-align: center

http://jsfiddle.net/3MJEm/

#t {
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
    text-align:center;
}
于 2013-02-07T16:52:22.270 に答える
0

width：75％;のように、幅にパーセンテージを指定してみてください。また、divにポジショニングを与えるので、相対を使用することをお勧めします。

于 2013-02-07T16:38:46.680 に答える
0

#t中央に配置するには幅が必要です。

に設定すると、articlesは中央に配置されませんdisplay:inline。

于 2013-02-07T16:39:13.180 に答える
0 
#t {
margin: auto;
margin-top:10px;
width: 84px; 
}
.tc {
display: inline;
border-style: solid;
border-width:1px;
}
于 2014-05-20T20:35:19.323 に答える