div内の縦方向の中間コンテンツですか？

Question

私はブートストラップを使用しています。ブートストラップはセレクタの上部にあるのではなく、divの中央にテキストを置いていますか？

例を参照してください：https://jsfiddle.net/DTcHh/23497/

あなたはCreate user accounts for your staffが真ん中にする必要があります上部にある見ることができ、ボタンと並んで。

ブートストラップでこれを行う方法は？

<div class="row"> 
    <div class="col-md-8"> 
     Create user accounts for your staff. 
    </div> 
    <div class="col-md-4"> 
     <div class="clearfix"> 
      <div class="pull-right"> 
       <a class="btn btn-lg btn-primary " href="#">Add Staff</a> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

お持ちの場合

.row.row-vertical { 
 
\t display: flex; 
 
\t align-items: center; 
 
\t justify-content: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row row-vertical"> 
 
    <div class="col-md-8"> 
 
     Create user accounts for your staff. 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="clearfix"> 
 
      <div class="pull-right"> 
 
       <a class="btn btn-lg btn-primary " href="#">Add Staff</a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

注：あなたがここにフレキシボックスとそのサポートの詳細を読むことができます：flexを使用する機能、簡単なCSSの少しだけを使用して垂直flexboxソリューションをサポートするために、ブートストラップを拡張することができhttp://caniuse.com/#feat=flexbox

Answer 2

破壊ブートストラップを防ぎ、あなたのids.good運にこれらのCSSルールを追加するには、特定のHTML要素にIDを追加することが賢明である、あなたのCSSに

.col-md-8,.col-md-4{ 
    display:inline-block !important; 
    vertical-align:middle !important; 
    } 
    .col-md-4{ 
    float:right !important 
    } 

をこれらのルールを追加します...

Answer 3

.row .col-md-4, 
 
.row .col-md-8{ 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row row-vertical"> 
 
    <div class="col-md-8"> 
 
     Create user accounts for your staff. 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="clearfix"> 
 
      <div class="pull-right"> 
 
       <a class="btn btn-lg btn-primary " href="#">Add Staff</a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>