1

要素を整列させるためにform2つfieldsets使用しています。flexbox2番目のフィールドセットには、行に表示し、この行の中央に配置する2つのボタンが含まれています。

/-----------------------------------\
|     /----------\ /----------\     |
|<-x->| Button A | | Button B |<-x->|
|     \----------/ \----------/     |
\-----------------------------------/

私はこのフィドルを用意しました。

4

2 に答える 2

3

フレックスボックスと<fieldset>うまく混ざりません: http://jsfiddle.net/w9k5y/9/したがって、今のところフレックスボックスの命令を a<div>でラップすることをお勧めします。

ただし、この場合、フレックスボックスを使用する必要さえありません。text-align: center;同じ結果が得られます: http://jsfiddle.net/w9k5y/1/<div>これは Romain と同じアイデアですが、今回は余分なものは必ずしも必要ではありません。

于 2013-10-29T17:50:10.627 に答える
1

これを行う最善の方法は、ボタンの周りに div コンテナーを作成することです。ボタンの合計幅に等しいコンテナーの可変/固定幅を設定します。

ここに例があります

HTML

 <div id="container">
    <button>Button A</button>
    <button>Button B</button>
  </div>

CSS

#container {
   width: 30%;
   margin: 0 auto;
}

そうでなければ、それを行うワイルドな方法があります。

ここでレビューできます

CSS

#container {
 text-align: center 
}
于 2013-10-29T17:33:08.337 に答える