css - 2 つのフローティング div の間で div を中央に配置するにはどうすればよいですか

Question

こんにちは、左サイドバーと右サイドバーの間でコンテンツ div を中央に配置するのに問題があります。左サイドバーとライドサイドバーが浮いていて、float:center. 中央に配置できる唯一の方法はパディングを使用することですが、それにより中央の div がサイドバーの下に移動します。

Answer 1

3 つの div すべての周りにラッパーを作成し、中央の div をマージンで配置します

<div id="wrap">
 <div id="left" style="float: left"></div>
 <div id="content" stlye="float: left: margin: 0 auto;"></div>
 <div id="right" stlye="float: left"></div>
</div>

Answer 2

<div style="widht: 960px;">
    <div class="content left">left</div>
     <div class="content center">center</div>
      <div class="content right">right</div>
      <div style="clear:both"></div>
</div>

ここにcss

.content {
float: left;
}

.left , .right{
width : 180px;
margin : 0 10px;
}

.center{
widht: 540px;
margin : 0 10px;

}

Answer 3

これが実用的なものです。

使用マージン: 0 auto; ほとんどの場合、要素が中央に配置されます。(簡単な注意: これが機能するには、要素に宣言された幅が必要です。)

マージン: 0 auto; rule は、0 の上マージンと下マージン、および自動の左マージンと右マージンの省略形です。左右の自動余白が連携して要素をコンテナの中央に押し込みます。

マージン: 0 auto; 設定はすべてのセンタリング状況で完全に機能するわけではありませんが、多くの状況で機能します.
参考： CSS HTMLで中央を浮かせられない

<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>

CSS

.leftsidebar 
{ 
height: 608px; 
width: 60px; 
background:red; 
float:left; } 

.rightsidebar 
{ 
background:blue; 
height: 608px; 
width: 163px; 
float:right; 
} 

.content 
{ 
width: auto; //or any width that you want
margin:0 auto;
background:yellow;
}

Answer 4

浮動ベースは次のようになります。

<div id="left"> Left</div>
<div id="right" >right</div>
<div id="middle">in between, but after</div>

#left {float:left;width:XX;}
#right {float:right;width:XX;}
#middle {overflow:hidden; margin:0 XX;}

: display: table/table-cell | インラインブロック | フレックス。