2

コンテンツを中央に配置したいのです.SideBarFirst divが、これを達成する方法がわかりません。

padding要素への追加またはleft/right値に基づいていないソリューションで誰かが私を助けてくれますか?

CSS:

body {
    width: 960px;
    margin: 0 auto;
} 

.content {
    width:500px; 
    float: left;
}

.SideBarFirst {
    width:460px; 
    float: right;
}

.SideBarFirst div {
    width: 40px;
    margin: 0 auto; 
}

HTML:

<body>
    <div class="content">test</div>
    <div class="SideBarFirst">
        <div>not working for center</div>
    </div>
</body>

私の現在のコード: http://jsfiddle.net/mmnaderi/yTCkx/

4

4 に答える 4

1

これを削除するだけです：

body {
    width: 960px;
    margin: 0 auto;
}

これを使って：

HTML

<div class="content">test</div>
<div class="SideBarFirst">
    <div>not working for center</div>
</div>

CSS:

.content {width:500px; float : left;}

.SideBarFirst {width:460px; float : right;}

.SideBarFirst div {
    width: 40px;
    margin: 0 auto; 
}

このフィドルを見る

于 2013-07-28T12:10:40.633 に答える
0

あなたは％を使用することができます

.SideBarFirst div {
    width: 40px;
    margin: 0 50%; 
}

または、もっと野蛮になってこれを試すこともできます：

.SideBarFirst div {
    width: 40px;
    margin-left: 210px; 
}

エラスティック レイアウトは、この 2 番目のコードでは正しく機能しません

またはこれ：

<div class="content">test</div>
<div class="SideBarFirst">
    <div align="center">not working for center</div>
</div>

これも見てください: <div> を別の <div> で水平方向に中央揃えにする方法は?

于 2013-07-28T12:19:04.733 に答える
0

あなたの問題は、常に左側に表示されるように、要素を左に浮かせていることです。中央に配置したい場合は、css を次のように変更します。

.content {width:500px; float : left;}

.SideBarFirst {width:460px; float : right;}

.SideBarFirst div {
    width: 40px;
    margin: 0 auto; 
}

これも削除します：

body {
    width: 960px;
    margin: 0 auto;
}
于 2013-07-28T12:26:27.793 に答える