ブートストラップ縦方向の整列イメージ

Question

このWebサイトで：http://www.livenews.surf/私はニュースイメージとテキストを垂直に真ん中に整列させたいのですが、どうすればいいのですか？

Answer 1

最も簡単な解決策は、Flexboxを使用することです（詳細については、仕様を参照してください）。この特定のケースでは

、div要素を含むコンテンツのそれぞれにカスタムクラスを割り当てる（現在はそれが唯一の.col-md-11を持っている）、例えば、クラス「コンテンツ」と自分のスタイルシート

.content { 
    display: flex; 
    align-items: center; 
    flex-wrap: wrap; 
} 

小さなコードにこのコードを追加説明：align-itemsは、既定のフレックス方向が行で、flex-wrapは親コンテナが子を次の行にラップできるようにするため、項目を垂直に整列します（デフォルトはnowrap）。

この回答にはベンダープレフィックスは含まれていませんが、Autoprefixerなどのツールを使用することを強くお勧めします。

Answer 2

さて、あなたは、ブートストラップの列を使用しているとして、以下に説明するように、あなたが手順のカップルを以下で行う必要がありますので、次のようにあなたのWebページの一般的なケースのHTML構造であるため

：

<div class="col-md-11"> 
    <div class="col-md-5"> 
     <a href="#"> 
      <img src="images/image.jgp"> 
     </a> 
    </div> 
    <div class="col-md-7"> 
     // text goes here 
    </div> 
</div> 

まず、両方の列（画像+テキスト）の高さを同じにする必要があります。このためには、jQuery matchHeightを使用できます。 その後、次の変更の助けを借りて、画像を垂直方向に中央に置くことができます。

<div class="col-md-5 photo"> 
    <a href="#"> 
     <img src="images/image.jgp"> 
    </a> 
</div> 

.photo { 
    display: table; 
} 
.photo a { 
    vertical-align: middle; 
    display: table-cell; 
} 
.photo img { 
    display: block; 
    height: auto; 
    width: 100%; 
} 

ここはPlnkrです。