CSS - 垂直方向にセンターすることができません

Question

ブートストラップの行に4つのdivを垂直方向にセンタリングしようとしています。

<div class="row"> 
    <div class="col-md-3"><button type="button" style="float:right; height: 40px;">Contact</button></div> 
    <div class="col-md-3">Activity 1</div> 
    <div class="col-md-3">Activity 2</div> 
    <div class="col-md-3">Activity 3</div> 
</div> 

私は正当化自己の中の画面との行の右側のボタンを維持する必要があるので、私はフレキシボックスを使用することはできませんので：ここに は私の基本的なコードは、フレックス・エンドではありません行の右側にボタンを保持するのに十分です。コードの最後にあるボタンを使って行を移動することもできません。なぜなら、私はモバイルデバイスのためにそれを最初に残しておく必要があるからです。 私はまたディスプレイを使用しようとしました：テーブルとディスプレイ：テーブルセルそれでもまだ動作しません。

誰でもアイデアはありますか？

Answer 1

あなたは缶利用フレックスボックスと行の右側にある最初のボタンをプッシュするorder特性を利用して、その後フレキシボックスが各div要素の内容をセンタリングすることができます。

モバイルサイズでは、メディアクエリでorderプロパティをオーバーライドできます。

.row { 
 
    display: flex; 
 
} 
 

 
.col-md-3 { 
 
    display: flex; 
 
    align-items:center; /* vertical center */ 
 

 
    } 
 

 
.last { 
 
    order:2; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-3 last"><button type="button">Contact</button></div> 
 
    <div class="col-md-3">Activity 1</div> 
 
    <div class="col-md-3">Activity 2</div> 
 
    <div class="col-md-3">Activity 3</div> 
 
</div> 
 
</div>

Answer 2

行をフレックスとして表示するように、フロートをボタンの右に移動してください。 最も簡単な方法は、justify-content: space-between;を使用して、</row>の直前にボタンを設定することです。 次に、align-items: centerを使用します。

Answer 3

あなたの解決に役立つ以下のようなクラスを指定してみてください。

.col-md-3 ~ .col-md-3 
{display:table-cell;}