ダイナミックハイのブートストラップの列にアイコンを垂直に整列します

Question

ブートストラップにはアイコンとその隣に何らかのテキストがあります。両方ともcol-md-1とcol-md-11に分かれています。右側のテキストの長さは動的なので、長い場合は次の行に折り返します。しかしアイコンは常に同じです。私は、アイコンを垂直方向の中央に維持する方法を考え出すのに問題がありますcol。デフォルトではテキストが1行であれば、それはそうのような中心です：

しかし、テキストは過去1行になると、アイコンが同じ場所に残ります。私は、アイコン（fontawesome）の<i>に、ない結果とvertical-align:middleを使用して試してみました - ここで見つける：

私も試してみてvertical-align:middleを活用するためにdisplay:tableの内側にアイコンを入れてみましたが、運がない。可能であればBootstrapの列の間隔を維持したいのですが、テキストの長さに関係なくアイコンを中央に配置したいと考えています。

<div class="alert alert-danger" 
    role="alert"> 
    <div class="row"> 
     <div class="col-md-1"> 
      <i class="fa fa-exclamation-triangle fa-2x" 
      style="vertical-align:middle;"></i> 
     </div> 
     <div class="col-md-11"> 
      {{vm.modalConfig.message}} 
     </div> 
    </div> 
</div> 

EDIT - また助けを容易にするため、ここでplunkrです！

Answer 1

.rowと​​のフレックスボックスを縦にセンタリングすることができます。あなたがそれらを中央にflexboxを使用するか、またはposition: relativeといくつかのtransformプロパティを使用することができますいずれか

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<style> 
 
    .alert > .row { 
 
    display: flex; 
 
    align-items: center; 
 
    } 
 
</style> 
 
<div class="alert alert-danger" 
 
    role="alert"> 
 
    <div class="row"> 
 
     <div class="col-md-1"> 
 
      <i class="fa fa-exclamation-triangle fa-2x" 
 
      style="vertical-align:middle;"></i> 
 
     </div> 
 
     <div class="col-md-11"> 
 
      long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

。

フレキシボックス：

.row { 
    -webkit-display: flex; 
    -webkit-align-items: center; 
    display: flex; 
    align-items: center; 
} 

相対位置：

.row { 
    position: relative; 
} 
.row col-md-1 { 
    position: absolute; 
    top: 50%; 
    transform: translate&(-50%); 
} 

オプション1は間違いなく迅速に解決策です。また、別のクラスまたはIDを.rowに追加することをお勧めします。そのため、これらの変更はフレームワーク全体に適用されません。