html - CSS：浮動要素を含む要素を中央に配置する

Question

display：blockを持っているが、すべて片側に浮いている要素を含む、幅が不明な要素を中央に配置するにはどうすればよいですか？

基本的に、私は表示されているいくつかの項目を含むメニューを持っています：ブロック（適切なパディングが必要なため）が、すべて1行になっています。

jsFiddleで例を作成しました。ここでは、緑のメニューをピンクの要素の中央に配置し、ピンクの要素が緑のメニューの高さに対応する必要があります。

編集：申し訳ありませんが、間違った例、正しい例で更新

Answer 1

私はあなたが少し持っていたものをいじくり回しました。これはあなたが探しているものですか？緑はピンクの中央にあり、緑にカーソルを合わせるとシアンのブロックが強調表示されます。これらのfloat: left行は、元々持っていたものと同じセレクターにも適用されます...

#page {
   background: yellow;  
   text-align: center; 
   width: 100%;
   float: left;
}
#mainmenu {
    background: pink;
    padding: 5px;
    width: 400px;
    text-align: center;
}
#mainmenu ul {
    background: green;
    display: inline-block;
}
#mainmenu li {
   display: inline-block;
   padding: 5px 10px 5px 10px;
   float: left;
}
#mainmenu a, #mainmenu a:visited {
   color: #ffffff;
   font-size: 12px;
   text-align: center;
   text-decoration: none;    
}
#mainmenu li:hover {
   background: cyan;        
}

<ahref = "http://jsfiddle.net/SKLZ7/39/"rel="nofollow">デモ

Answer 2

フロートでこれを行うのではなく、を使用して実現できますdisplay: inline-block。

したがって#mainmenu li、次のようになります。

#mainmenu li {
   display: inline-block;
   *display: inline;      /* add this for IE7 as it does not */
   *zoom: 1;              /* support display: inline-block */   
}

JsFiddleの例：http：//jsfiddle.net/SKLZ7/6/

Answer 3

他の要素がその周りに浮くように、floatを使用しています。残りの部分ではフロートをオフにする必要があります。プロパティを使用clear:bothしてオフにします。

ここで述べたように、リストの後に追加でき<div style="clear:both;"></div>ます。