サイドバーでdivをセンタリングしますが、サイドバーで移動しないようにします。

-1

ブラウザの中央にdivを配置したいのですが、中央のdivをサイドバー（赤いサイドバー上）に移動する必要はありません。サイドバーでdivをセンタリングしますが、サイドバーで移動しないようにします。

私は<div>の両方の絶対位置を使用しています。私は相対的で浮遊していましたが、結果はありませんでした。

更新：

うまく説明ではないため申し訳ありませんが、私は、ブラウザのサイズに直しと作れば私の質問だった、それはとても小さな中心コンテンツは、サイドバーの上に行きます。

中心のコンテンツを中央に配置したいが、ブラウザの幅が小さい場合はサイドバーと重複したくない。私は正確にあなたが何を意味するかわからないが、私のjsfiddle demoを試してみてください

<body> 
    <div id="sidebar"> sidebar stuff </div> 
    <div id="distance"></div> 
    <div id="content"> 
     <!-- absolutely centered content --> 
    </div> 

</body> 

<style type="text/css"> 
html, body { 
    height: 100%;   
} 
body { 
    text-align: center; 
    padding: 0;   
    margin: 0;   
} 
#sidebar { 
    position:absolute; 
    top:0; 
} 
#distance { 
    margin-bottom: -10em; 
    background: red;  
    width: 1px;   
    height: 50%;   
    float: left;   

} 
#content { 
    position: relative; 
    text-align: left;  
    height: 20em;   
    width: 40em;   
    background: blue;  
    margin: 0 auto;  
    clear: left;   
} 
    </style>

出典

2012-03-14 Mario

センターDIVがサイドバーの後ろにいればいいですか？ – w3uiguru

：ここ

はコードです。あなたが必要と思ったのは、ある幅のサイドバーがあり、そのサイドバーを考慮してdivを配置したいということです。

私はdisplay:inline-blockを使用していますので、IE7では動作しません。 UPDATE：以下COMENTで Praveenさんビジャヤンはzoom: 1と*display: inlineを追加すると、あなたが質問からしたい正確に何を把握するためにIE7

出典

2012-03-14 16:21:10 mkk

私はOPの要件を理解していませんでした。しかし、まだ..あなたはIE7で動作しませんあなたのコードを述べた理由。私はそれができると思います。 –

@Praaven私はdisplay：inline-blockを使用しているため、そこでは動作しません。 – mkk

大丈夫です。簡単な修正があります。ズームを追加：1; *表示：インライン; –

ハード修正することを述べたが、ここに行く：

http://jsfiddle.net/BFmbQ/4/

<body> 
    <div id="content"> 
     <!-- absolutely centered content --> 
     <div id="sidebar"> sidebar stuff </div> 
    </div> 
</body> 

<style type="text/css"> 
html, body { 
    height: 100%;   
} 
body { 
    text-align: center; 
    padding: 0;   
    margin: 0;   
} 
#sidebar { 
    position:absolute; 
    top:0; 
    right:-200px; 
    width: 200px; 
    height:200px; 
    background: red; 
} 
#content { 
    position:relative; 
    text-align: left;  
    height: 20em;   
    width: 40em;   
    background: blue;  
    margin: 0 auto;   
} 
</style>

サイドバーの幅がどのようなものであっても、正しい位置を同じ量の負の値にします。

出典

2012-03-14 17:08:41 Bantros

申し訳ありませんが、私の質問は、私がブラウザのサイズを変更し、それを小さくすると、中心のコンテンツがサイドバーに表示されます。中心のコンテンツを中央に配置したいが、ブラウザの幅が小さいときにサイドバーと重複したくない。 – Mario

問題なし。あなたは私の答えをチェックしましたか？あなたが尋ねていることをするように思われる - http://jsfiddle.net/BFmbQ/4/ – Bantros

サイドバーでdivをセンタリングしますが、サイドバーで移動しないようにします。

答えて

関連する問題