4

次のHtmlコードがあります

<div id="team">
    <h1>Team</h1>
    <img src="assets/divider.png" id="divider">
    <img src="assets/team.png" id="team_pic">
</div>

次のCSS

div#team {
    margin: 0 auto;
    margin-left:auto;
    margin-right:auto;
    right:auto;
    left:auto;
}

ただし、子要素の仕切りとチームの写真はずっと左側にあります。私は margin:auto がすべてを中央に配置します。

次に、以下を子要素に入れます。

div#team img#team_pic {
    width:704px;
    height:462px;
    margin-left:auto;
    margin-left:auto;
}

いいえ、何も起こりません。要素はまだ左にあり、中央にありません。

4

6 に答える 6

18

幅を #team に設定する必要があります。次に例を示します。

div#team {
   margin: 0 auto;
   width: 800px;
}

...これは、次の省略形です。

div#team {
    margin-top: 0;
    margin-left: auto;
    margin-bottom: 0;
    margin-right: auto;
    width: 800px;
}
于 2013-03-28T21:20:41.983 に答える
3

デフォルトでは、画像はインライン レベルの要素です。display:block;画像とマージンを適切に機能させたい場合に使用する必要があります。

img{
 display: block;
}
于 2014-02-26T19:38:50.047 に答える
2

margin: auto を使用するには、チームに幅が必要です。

div#team {
    margin: 0 auto;
    width: 400px;
}

ここにフィドルがあります: JS Fiddle

于 2013-03-28T21:20:34.367 に答える
2

float もこれを混乱させます.. float:none;どこか別のルールから「float」ディレクティブを継承している可能性があると思われる場合は、トリックを実行します。

于 2015-07-05T06:09:00.303 に答える
0 
#team { 
    margin: auto; 
    width: 400px;
}

基本的に、ページの中央に div を表示する場合にのみ、マージンは幅に依存します。

于 2013-03-28T21:31:29.123 に答える