Twitter Bootstrapセルの画像の縦方向の整列（高さは不明）

私はブートストラップグリッドを持っており、セル内にイメージ（200 x 100個の例が示されています）を中央に配置しようとしています。Twitter Bootstrapセルの画像の縦方向の整列（高さは不明）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
    <meta charset="utf-8" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
     <div class="row" style="border:1px solid red;"> 
 
      <div class="col-xs-6"> 
 
       some text<br /> 
 
       some text<br /> 
 
       some text<br /> 
 
       some text<br /> 
 
      </div> 
 
      <div class="col-xs-6"> 
 
       some text<br /> 
 
       some text<br /> 
 
       some text<br /> 
 
       some text<br /> 
 
      </div> 
 
     </div> 
 
     <div class="row" style="border:1px solid red;"> 
 
      <div class="col-xs-6"> 
 
       <img src="http://placehold.it/350x150"> 
 
      </div> 
 
      <div class="col-xs-6 container"> 
 
       <img class="img" src="http://placehold.it/200x100"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

私は運なしでインターネット上で提供される技術の多くを試してみました。（彼らのほとんどは明示的に高さを定義しています）証拠として私はここにそれらのいくつかを提供します：

Example1：パディングトップのトリック：100％は私が必要としない行を増やします。

Example2：テーブル/テーブルセルだけ

例3を動作しない：インラインブロックおよび垂直整列とトリック

<style> 
     .container:before { 
      content: ''; 
      display: inline-block; 
      height: 100%; 
      vertical-align: middle; 
     } 

     img { 
      display: inline-block; 
      vertical-align: middle; 
     } 
    </style>

例4動作していない。トップとの絶対位置は、50を残し％と変換が働いている間違った

<style> 
     .img { 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      transform: translate(-50%,-50%); 
     } 
    </style>

出典

2016-09-15 Julian

がCODEPEN

CSSでこの

チェックの例を試してみてください作品より：

.row { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    flex-wrap: wrap; 
} 

.row > [class*='col-'] { 
    display: flex; 
    flex-direction: column; 
    align-self: center; 
} 

.row > [class*='col-'] img { 
    align-self: center; 
}

出典

2016-09-15 16:43:53

私のお気に入りの垂直配向ハック：

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

高さが不明なコンテナにアイテムを挟むには、translateYとtopを使用します。これにはIE10 +が必要です。

出典

2016-09-15 16:31:42 staypuftman

この場合には、 – Julian

あなたは、ブートストラップスタイリングに対して行かなければならないが、それは

.img_container { 
 
    position: relative; 
 
} 
 
.reset_pos { 
 
    position: static !important; 
 
} 
 
.center { 
 
    position: absolute !important; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
    <meta charset="utf-8" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="row" style="border:1px solid red;"> 
 
     <div class="col-xs-6"> 
 
     some text 
 
     <br />some text 
 
     <br />some text 
 
     <br />some text 
 
     <br /> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
     some text 
 
     <br />some text 
 
     <br />some text 
 
     <br />some text 
 
     <br /> 
 
     </div> 
 
    </div> 
 
    <div class="row img_container" style="border:1px solid red;"> 
 
     <div class="col-xs-6"> 
 
     <img src="http://placehold.it/350x150"> 
 
     </div> 
 
     <div class="col-xs-6 container reset_pos"> 
 
     <img class="img center" src="http://placehold.it/200x100"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2016-09-15 16:43:12

が応答しないで画像の列をいただきありがとうございますが、この場合には働いていません。 – Julian

また、画像の親divの高さが画像の高さよりも高いことを確認する必要があります。

.row { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.row > [class*='col-'] { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-self: center; 
 
} 
 

 
.row > [class*='col-'] img { 
 
    align-self: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
    <meta charset="utf-8" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
    
 
</head> 
 
<body> 
 
    <div class="container"> 
 
     <div class="row" style="border:1px solid red;"> 
 
      <div class="col-xs-6"> 
 
       some text<br /> 
 
       some text<br /> 
 
       some text<br /> 
 
       some text<br /> 
 
      </div> 
 
      <div class="col-xs-6"> 
 
       some text<br /> 
 
       some text<br /> 
 
       some text<br /> 
 
       some text<br /> 
 
      </div> 
 
     </div> 
 
     <div class="row" style="border:1px solid red;"> 
 
      <div class="col-xs-6 different-height-1" style="border:1px solid green;"> 
 
       <img class="img-responsive" src="http://placehold.it/350x150"> 
 
      </div> 
 
      <div class="col-xs-6 different-height-2" style="border:1px solid green;"> 
 
       <img class="img-responsive" src="http://placehold.it/200x100"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

出典

2016-09-15 16:44:08

minの高さを設定しますが、イベントの最小高さはわかりません。 2番目のイメージは、行内で垂直に配置されていません。 – Julian

私はそれをcolに対して真ん中に揃えようとしました。しかし、他の答えはそれを解決しました..ちょうどそれを試して編集した鉱山.. –

Twitter Bootstrapセルの画像の縦方向の整列（高さは不明）

答えて

関連する問題