web-dev-qa-db-ja.com

Bootstrap=画像の垂直方向の整列

このウェブサイト： http://www.livenews.surf/ ニュース画像とテキストを垂直方向に中央揃えにしたいのですが、どうすればいいですか？

csshtml5imagecss3vertical-alignment
12
Gonçalo Loureiro

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

この特定のケースでは、divを含む各コンテンツ（現在は.col-md-11のみ）にカスタムクラスを割り当てます（たとえば、クラス "content"）、このコードをスタイルシートに追加します

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

小さなコードの説明：align-itemsはアイテムを垂直に整列します。デフォルトのflex方向であるrowをそのままにして、flex-wrapにより親コンテナが子を次の行にラップできるようになります（デフォルトはnowrap ）。

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

25
Leo Napoleon

さて、bootstrap列を使用しているので、以下で説明するいくつかの手順を実行して作成する必要があります。

一般的なケースとして、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 です。

5
Mohammad Usman