0

乱数の子 div を持つ親 DIV (メニュー バー) があります。幅や div の数に関係なく (親の内側に収まる限り)、常に子 div を水平方向に中央揃えにする、クリーンでシンプルな CSS を探しています。すべての幅を計算したり、絶対配置を使用したりする必要はありません。

いくつかの解決策を検討した後、このコードを思いつきましたが、特にテキストや画像で埋める場合、子 div はまだ適切に中央に配置されません。

HTML:

<div id="menubar">
   <div id="button">too much text will offset the other buttons</div>
   <div id="button">b2</div>
   <div id="button">b3</div>
</div>

CSS:

#menubar {
    position:absolute;
    bottom:0px;
    background-color: #00A0E2;
    width:100%; height:80px;
    text-align:center;
} 

#button {
    margin: 5px auto 5px auto;
    width:120px;height:70px;
    display:inline-block;
    background-color:white;
    cursor: pointer;
}

私の問題を説明するために、この JSFiddle を作成しました: http://jsfiddle.net/mZ2P2/

4

2 に答える 2

2

vertical-align高さが同じでない場合に正しく表示されるように、インライン要素を忘れました。これが実際の例です。idまた、ボタンの属性を削除し、 class.

編集: jsfiddle.net は今のところうまく機能していません。導入された変更vertical-align: topは.buttonクラスにありました。

于 2013-01-17T17:16:36.963 に答える
0

順序付けられていないリストを使用してから、css を使用してそれらを中央に配置しないでください。

于 2013-01-17T17:16:03.970 に答える