ブートストラップでヘッダー要素とボタンツールバーを垂直に整列する

Question

私はページ内にブートストラップ3ボタンツールバーを使用していますが、ボタンのツールバーとボタンのラベルを垂直方向に合わせて問題が発生しています。私はそれらを垂直に中心に置くことを好むでしょう。

<div id="share-privacy-selector"> 
    <label>Sharing:</label> 
    <div class="btn-toolbar" role="toolbar" style="display: inline-block;"> 
    <div class="btn-group" role="group"> 
     <button type="button" class="btn btn-primary">Public</button> 
     <button type="button" class="btn btn-default">Hidden</button> 
     <button type="button" class="btn btn-default">Private</button> 
    </div> 
    </div> 
</div> 

これは、次のように生成します。

ブートストラップ付き

Here's a jsBinあなたが問題を見ることができるように含まれています。

私のラベル以外の要素を使用する必要がありますか？そうでない場合は、ラベル、親div、またはdiv.btnツールバーにどのようなスタイルを追加して、すべてが垂直に整列させることができますか？

Answer 1

labelとtoolbarの両方でvertical-align: bottomを試してみてください。

あなたjsBinに追加するコード：

#share-privacy-selector > .btn-toolbar, 
#share-privacy-selector > label { 
    vertical-align: bottom; 
} 

TIP：通常、それはvertical-align: middleだろうが、あなたの場合には、それはtoolbarよりlabel高い位置。スニペット

チェックアウト：

Answer 2

#share-privacy-selector > .btn-toolbar, 
 
#share-privacy-selector > label { 
 
    vertical-align: bottom; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
 
rel="stylesheet" type="text/css" /> 
 

 
<div id="share-privacy-selector"> 
 
    <label>Sharing:</label> 
 
    <div class="btn-toolbar" role="toolbar" style="display: inline-block;"> 
 
    <div class="btn-group" role="group"> 
 
     <button type="button" class="btn btn-primary">Public</button> 
 
     <button type="button" class="btn btn-default">Hidden</button> 
 
     <button type="button" class="btn btn-default">Private</button> 
 
    </div> 
 
    </div> 
 
</div>

ちょうど table-cellに blockからあなたの表示ルールを変更し、 vertical-align:middleを適用します。

の作業例：

#share-privacy-selector label, 
 
#share-privacy-selector .btn-toolbar { 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="share-privacy-selector"> 
 
    <label>Sharing:</label> 
 
    <div class="btn-toolbar" role="toolbar"> 
 
    <div class="btn-group" role="group"> 
 
     <button type="button" class="btn btn-primary">Public</button> 
 
     <button type="button" class="btn btn-default">Hidden</button> 
 
     <button type="button" class="btn btn-default">Private</button> 
 
    </div> 
 
    </div> 
 
</div>