web-dev-qa-db-ja.com

bootstrap 3と垂直に揃える

私はTwitter Bootstrap 3を使用していますが、2つのdivを垂直方向に整列させたいときに問題があります。例えば、 - JSFiddle link ：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

Bootstrapのグリッドシステムはfloat: leftではなくdisplay:inline-blockを使用するため、プロパティvertical-alignは機能しません。私はmargin-topを使ってそれを修正しようとしました、しかしこれはレスポンシブデザインのための良い解決策ではないと思います。

htmlcsscss3twitter-bootstraptwitter-bootstrap-3
834
corinem

この答えはハックを提示しますが、（ @Haschem answer に記載されているように）flexboxを使用することを強くお勧めします。

デモリンク：
- ブートストラップ3
- ブートストラップ4アルファ6

必要に応じてカスタムクラスを使用することもできます。

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
<div class="row">
    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Bootply

inline-blockを使用すると、コードに実スペースを空けるとブロック間にスペースが追加されます（...</div> </div>...のように）。列サイズが12になると、この余分なスペースがグリッドを壊します。

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div>
    <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

ここでは、<div class="[...] col-lg-2">と<div class="[...] col-lg-10">の間に余分なスペースがあります（キャリッジリターンと2タブ/ 8スペース）。など...

Enter image description here

この余分なスペースを蹴りましょう！

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Enter image description here

一見無駄なコメントに注意してください<!-- ... -->？ important - これらがなければ、<div>要素間の空白がレイアウト内のスペースを占め、グリッドシステムを壊します。

注：Bootplyは更新されました

893
zessx

柔軟なボックスレイアウト

CSS Flexible Box の出現により、多くのWebデザイナーの悪夢1 解決されました。最もハッキーなものの1つ、垂直方向の配置。 未知の高さでも可能です。

「20年に及ぶレイアウトハックは終わりに近づいています。明日ではなく、すぐに、そして残りの人生のために。」

— CSSレジェンダリー Eric Meyer at W3Conf 201

Flexible Box（または、Flexbox）は、レイアウト目的のために特別に設計された新しいレイアウトシステムです。 仕様の状態 ：

Flexレイアウトは、見かけ上ブロックレイアウトに似ています。フロートや列など、ブロックレイアウトで使用できる、より複雑なテキスト中心またはドキュメント中心のプロパティの多くが欠けています。その見返りに、webappsや複雑なWebページがしばしば必要とする方法でスペースを配布し、コンテンツを調整するためのシンプルで強力なツールを獲得します。

この場合、どのように役立ちますか？さて、見てみましょう。

垂直に整列した列

Twitter Bootstrapを使用すると、いくつかの.rowsを持つ.col-*sがあります。必要なのは、目的の.rowを表示することだけです2 flex container ボックスとして、すべての flex item s（列）を align-items プロパティによって垂直に揃えます。

ここの例（コメントを注意深く読んでください）

<div class="container">
    <div class="row vertical-align"> <!--
                    ^--  Additional class -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>

.vertical-align {
    display: flex;
    align-items: center;
}

出力

Vertical aligned columns in Twitter Bootstrap

色付きの領域には列のパディングボックスが表示されます。

align-items: centerの明確化

8.3クロス軸アライメント：align-itemsプロパティ

Flexアイテム は、 justify-content と同様ですが、垂直方向に、フレックスコンテナの現在の行の cross axis に配置できます。 align-items は、匿名 flex items を含むすべてのflexコンテナのアイテムのデフォルトの配置を設定します。

align-items: center;中心値により、 flex item のマージンボックスは、行内の cross axis の中央に配置されます。

ビッグアラート

重要な注意事項1： Twitter Bootstrapは、.col-xs-#クラスのいずれかを列に指定しない限り、余分な小さなデバイスの列のwidthを指定しません。

したがって、この特定のデモでは、列のwidthを明示的に指定するため、列をモバイルモードで適切に表示するために.col-xs-*クラスを使用しました。

ただし、代わりに、特定の画面サイズでdisplay: flex;をdisplay: block;に変更するだけで、Flexboxレイアウトをスイッチをオフにするすることもできます。例えば：

/* Extra small devices (767px and down) */
@media (max-width: 767px) {
    .row.vertical-align {
        display: block; /* Turn off the flexible box layout */
    }
}

または、特定の画面サイズで .vertical-alignonlyを指定

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .row.vertical-align {
        display: flex;
        align-items: center;
    }
}

その場合、 @KevinNelson の approach を使用します。

重要な注＃2：簡潔にするため、ベンダープレフィックスは省略されています。 Flexbox構文はその間に変更されました。書かれた新しい構文は、古いバージョンのWebブラウザーでは機能しません（ただし、Internet Explorer 9！FlexboxはInternet Explorer 10以降でサポートされています）。

これは、プロダクションモードでdisplay: -webkit-boxなどのベンダープレフィックスプロパティも使用する必要があることを意味します。

Demo で"Toggle Compiled View"をクリックすると、CSS宣言のプレフィックス付きバージョンが表示されます（ Autoprefixer のおかげです）。

縦に配置されたコンテンツを含むフルハイト列

前のデモ にあるように、列（フレックスアイテム）は、コンテナー（フレックスコンテナーボックス。つまり.row要素）ほど高くありません。

これは、align-itemsプロパティにcenter値を使用しているためです。デフォルト値はstretchであるため、アイテムは親要素の高さ全体を埋めることができます。

これを修正するには、列にdisplay: flex;を追加することもできます。

ここに例（コメントを気にせよ）

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;     /* Align the flex-items vertically */
  justify-content: center; /* Optional, to align inner flex-items
                              horizontally within the column  */
}

出力

Full-height columns with vertical aligned contents in Twitter Bootstrap

色付きの領域には列のパディングボックスが表示されます。

最後になりましたが大事なことです、このデモとコードスニペットは、目標を達成するための最新のアプローチを提供するために、異なるアイデアを提供することを目的としていることに注意してください。実際のWebサイトまたはアプリケーションでこのアプローチを使用する場合は、「Big Alert」セクションに注意してください。

ブラウザのサポートを含む詳細を読むには、次のリソースが役立ちます。

1. div内の画像を反応する高さで垂直に揃える2. Twitter Bootstrapのデフォルトの.rowを変更しないために、追加のクラスを使用することをお勧めします。

872
Hashem Qolami

以下のコードは私のために働きました：

.vertical-align {
    display: flex;
    align-items: center;
}
39
Thanga

2018年に更新

元の質問はBootstrap 3に関するものでしたが、Bootstrap 4がリリースされたので、垂直方向の中心に関するいくつかの更新されたガイダンスがあります。

重要！垂直中心は親の高さ

センタリングしようとしている要素の親に定義されたheightがない場合、none垂直センタリングソリューションが機能します！

ブートストラップ4

Bootstrap 4はデフォルトでflexboxであるため、次を使用して垂直方向の配置にさまざまなアプローチがあります： auto-margins 、 flexbox utils 、または display utils と一緒に vertical align utils 。最初は「vertical align utils」は明白に思えますが、これらのonlyはインラインおよびテーブル表示要素で動作します。いくつかのBootstrap 4つの垂直方向の中央揃えオプションがあります。

1-自動マージンを使用した垂直方向の中央：

垂直方向に中央揃えする別の方法は、my-autoを使用することです。これにより、コンテナ内の要素が中央に配置されます。たとえば、h-100は行を完全な高さにし、my-autoはcol-sm-12列を垂直方向の中央に配置します。

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

ブートストラップ4-オートマージンを使用した垂直中央Demo

my-autoは、垂直y軸のマージンを表し、次と同等です。

margin-top: auto;
margin-bottom: auto;

2-フレックスボックス付き垂直センター：

Vertical center grid columns

Bootstrap 4 .rowがdisplay:flexになったので、任意の列でalign-self-centerを使用して、垂直方向に中央揃えすることができます...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

または、align-items-center全体で.rowを使用して、行のすべてのcol-*を垂直方向に中央揃えにします...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

ブートストラップ4-縦の中央の異なる高さの列Demo

3-ディスプレイユーティリティを使用した垂直方向の中央：

ブートストラップ4には、 display utils があり、display:table、display:table-cell、display:inlineなどに使用できます。これらは 垂直配置で使用できますutils インライン、インラインブロック、またはテーブルセル要素を整列します。

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

ブートストラップ4-ディスプレイユーティリティを使用した垂直中央デモ

参照：Bootstrap 4の垂直方向の中央揃え

ブートストラップ3

中央へのアイテムのコンテナのFlexboxメソッド：

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

translateYメソッドの変換：

.transform-center-parent {
    position: relative;
    transform-style: preserve-3d;
}

.transform-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

インライン方式の表示：

.display-inline-block {
    display: inline;
}
.display-inline-block > div {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

Bootstrap 3つのセンタリング方法のデモ

26
Zim

DivのCSSでこれを試してください。

display: table-cell;
vertical-align: middle;
25
user2249160

問題解決のため、または単にCMSを使用しているという理由でマークアップをカスタマイズしたくない場合は、一般的な回答に従って、次の解決策を実行してください。

.valign {
  font-size: 0;
}

.valign > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row valign">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid #000">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid #F00">Small</div>
   </div>
 </div>

ここでの制限は、空白を削除するために行がフォントサイズを0に設定するため、親要素からフォントサイズを継承できないことです。

21
Manuszep

@mediaクエリ自体に慣れていない他の人に役立つ場合に備えて、私は私の "解決策"を共有すると思いました。

@ HashemQolamiの回答のおかげで、col- *クラスのようにモバイルで動作するメディアクエリをいくつか作成しました。これにより、モバイル用のcol- *をスタックできますが、大きな画面では中央に縦に並べて表示できます。

<div class='row row-sm-flex-center'>
    <div class='col-xs-12 col-sm-6'></div>
    <div class='col-xs-12 col-sm-6'></div>
</div>

。

.row-xs-flex-center {
    display:flex;
    align-items:center;
}
@media ( min-width:768px ) {
    .row-sm-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 992px ) {
    .row-md-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 1200px ) {
    .row-lg-flex-center {
        display:flex;
        align-items:center;
    }
}

画面解像度ごとに異なる列数（たとえば、-xsに2行、-smに3行、-mdに4行など）を必要とする、より複雑なレイアウトでは、さらに高度な微調整が必​​要になりますが、-xsの単純なページには必要です。 stackと-smそしてそれ以上の行数で、これはうまくいきます。

20
Kevin Nelson

私は David Walsh Vertical center CSSのようにこの方法を好む ：

.children{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

transformは必須ではありません。中心をもう少し正確に見つけるだけです。その結果、Internet Explorer 8の中心が若干狭くなることがありますが、それでも悪くはありません - 使用できますか - Transforms 2d。

20
user1477388

これが私の解決策です。このクラスをCSSコンテンツに追加するだけです。

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

それであなたのHTMLはこのようになるでしょう：

<div class="col-xs-12 align-middle">
  <div class="col-xs-6" style="background-color:blue;">
    <h3>Item</h3>
    <h3>Item</h3>
  </div>
  <div class="col-xs-6" style="background-color:red;">
    <h3>Item</h3>
  </div>
</div>

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
    <title>Title</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 align-middle">
          <div class="col-xs-6" style="background-color:blue;">
            <h3>Item</h3>
            <h3>Item</h3>
          </div>
          <div class="col-xs-6" style="background-color:red;">
            <h3>Item</h3>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>
14
Edvard Åkerberg

私はちょうどこれをしました、そして、それは私がそれにしたいことをします。

.align-middle {
  margin-top: 25%;
  margin-bottom: 25%;
}

そして今私のページはのようになります

<div class='container-fluid align-middle'>
    content

 ----------------------------------
 |                                |
 |   --------------------------   |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |   --------------------------   |
 |                                |
 ----------------------------------
13
Ryan Alexander

現在選択されている回答以外のブラウザではなく、Chromeを使用して次のコードが機能することが本当にわかりました。

.v-center {
    display:table!important; height:125px;
}

.v-center div[class*='col-'] {
   display: table-cell!important;
   vertical-align:middle;
   float:none;
}
.v-center img {
   max-height:125px;
}

Bootplyリンク

必要に応じて、高さを（特に.v-centerで）修正し、div[class*='col-']のdivを削除または変更する必要があります。

10
babycakes

私はこれと同じ問題に遭遇しました。私の場合、私は外側のコンテナの高さを知りませんでした、しかしこれは私がそれを固定した方法です：

最初にhtml要素とbody要素の高さを100％になるように設定します。これは重要！これがないと、htmlおよびbody要素は単にその子の高さを継承します。

html, body {
   height: 100%;
}

それから私は外側のコンテナクラスを持っていました：

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

そして最後に、次のクラスを持つ内部コンテナ

.inner-container {
  display: table-cell;
  vertical-align: middle;
}

HTMLは以下のように単純です。

<body>
   <div class="container">
     <div class="inner-container">
        <p>Vertically Aligned</p>
     </div>
   </div>
</body>

これで、コンテンツを垂直方向に整列させるために必要なすべてができました。フィドルでチェックしてください。

Jsfiddle

8
Kingsley Ijomah

Bootstrapの Less バージョンを使用していて、自分でCSSにコンパイルしている場合は、Bootstrapクラスで使用するユーティリティクラスを使用できます。

Bootstrapグリッドシステムの応答性と設定可能性を維持したい場合（-mdや-smを使用する場合など）、これらは幻想的にうまく機能することがわかりましたが、特定の行のすべての列の縦方向の高さはすべて同じにします。それから私はそれらのコンテンツを垂直方向に整列させ、行内のすべての列に共通の中央を共有させることができます。

CSS/Less：

.display-table {
    display: table;
    width: 100%;
}
.col-md-table-cell {
    @media (min-width: @screen-md-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.col-sm-table-cell {
    @media (min-width: @screen-sm-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.vertical-align-middle {
    vertical-align: middle;
}

HTML：

<div class="row display-table">
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
</div>
7
Gerbus

テーブルとテーブルセルは必要ありません。それは変換を使って簡単に達成できます。

例： http://codepen.io/arvind/pen/QNbwyM

コード：

.child {
  height: 10em;
  border: 1px solid green;
  position: relative;
}
.child-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row parent">
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:4em;border:1px solid #000">Big</div>
    </div>
  </div>
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
  </div>
</div>
6
Arvind Bhardwaj

異なる画面サイズで異なる列サイズを混在させるときに使いやすくするために、 zessx's answer について少し詳しく説明しました。

Sass を使用する場合は、これをscssファイルに追加できます。

@mixin v-col($prefix, $min-width) {
    @media (min-width: $min-width) {
        .col-#{$prefix}-v {
            display: inline-block;
            vertical-align: middle;
            float: none;
        }
    }
}

@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);

次のCSSが生成されます（Sassを使用していない場合は、スタイルシートで直接使用できます）。

@media (min-width: 1200px) {
    .col-lg-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 992px) {
    .col-md-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 768px) {
    .col-sm-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 480px) {
    .col-xs-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

これでレスポンシブコラムでこれを使用できます。

<div class="container">
    <div class="row">
        <div class="col-sm-7 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div><div class="col-sm-5 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div><div class="col-md-5 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div>
    </div>
</div>
6
sb.olofsson

ブートストラップ4以降、Flexの動作はネイティブにサポートされています。row divにd-flex align-items-centerを追加します。 CSSの内容を変更する必要はもうありません。

簡単な例： http://jsfiddle.net/vgks6L74/ /

<!-- language: html -->
<div class="row d-flex align-items-center">
  <div class="col-5 border border-dark" style="height:10em">  Big </div>
  <div class="col-2 border border-danger" style="height:3em"> Small </div>
</div>

あなたの例では： http://jsfiddle.net/7zwtL702/ /

<!-- language: html -->
<div class="row d-flex align-items-center">
    <div class="col-5">
        <div class="border border-dark" style="height:10em">Big</div>
    </div>
    <div class="col-2">
        <div class="border border-danger" style="height:3em">Small</div>
   </div>
</div>

出典：フレックス・ブートストラップ

4
Mr. Robot

うーん、偶然に私はいくつかの解決策を混ぜました、そしてそれは私が最小の解像度でBootstrap列を持つ3x3のテーブルを作ろうとした私のレイアウトのために今やっとうまくいきます。

/* Required styles */

#grid a {
  display: table;
}

#grid a div {
  display: table-cell;
  vertical-align: middle;
  float: none;
}


/* Additional styles for demo: */

body {
  padding: 20px;
}

a {
  height: 40px;
  border: 1px solid #444;
}

a > div {
  width: 100%;
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="grid" class="clearfix row">
  <a class="col-xs-4 align-center" href="#">
    <div>1</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>2</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>3</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>4</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>5</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>6</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>7</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>8</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>9</div>
  </a>
</div>
3
godblessstrawberry
    div{
        border: 1px solid;
    }
    span{
        display: flex;
        align-items: center;
    }
    .col-5{
        width: 100px;
        height: 50px;
        float: left;
        background: red;
    }
    .col-7{
        width: 200px;
        height: 24px;

        float: left;
        background: green;
    }
    <span>
        <div class="col-5">
        </div>
        <div class="col-7"></div>
    </span>
2
Nambi N Rajan

いくつかの方法があります。

  1. つかいます

    display: table-cell;
vertical-align: middle;

    そしてコンテナのCSS

    display: table;

  2. 画面サイズに対するパディングを変更するには、media-screenと一緒にパディングを使用します。もっと知るにはGoogle @mediaの画面。

  3. 相対パディングを使用

    つまり、パディングを％で指定します

1
Amaan Iqbal

これを試して、

.exe {
  font-size: 0;
}

.exe > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row  exe">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid grey">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid red">Small</div>
   </div>
 </div>
1
core114

Bootstrap 4（現在はアルファ版です）では、.align-items-centerクラスを使用できます。だからあなたはBootstrapの敏感な性格を保つことができます。私のためにすぐにうまく働きます。 Bootstrap 4 Documentation を参照してください。

0
DiCaprio

HTML

<div class="row">
    <div class="col-xs-2 pull-bottom"
         style="height:100px;background:blue">
    </div>
    <div class="col-xs-8 pull-bottom"
         style="height:50px;background:yellow">
    </div>
</div>

CSS

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}
0
Pacific P. Regmi