ブートストラップは縦方向に一列にcolsの位置を合わせ

Question

私は2つのcols

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="row"> 
 
       <div class="col-xs-1"> 
 
       Аты 
 
       Имя 
 
       </div> 
 
       <div class="col-xs-11"> 
 
       name 
 
       </div> 
 
</div>

私が最初col

の中心部に位置name文字列にしたいとの1行がどのように第二colをしなければなりません要素は最初にcolに垂直に整列しますか？

Answer 1

の内容を列のに揃えるには、最初に同じ高さにする必要があります。

高さを等しくするための2つの基本的なCSSメソッド（固定値を含まない）があります。

Codepen Demo

CSSテーブル

.row div { 
 
    border: 1px solid grey; 
 
} 
 
.table { 
 
    display: table; 
 
} 
 
.table div { 
 
    float: none; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row table"> 
 
    <div class="col-xs-1 "> 
 
     Аты Имя 
 
    </div> 
 
    <div class="col-xs-11"> 
 
     name 
 
    </div> 
 
    </div> 
 
</div>

フレキシボックス

.row div { 
 
    border: 1px solid grey; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
} 
 

 
.flex div { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row flex"> 
 
    <div class="col-xs-1 "> 
 
     Аты Имя 
 
    </div> 
 
    <div class="col-xs-11"> 
 
     name 
 
    </div> 
 
    </div> 
 
</div>