フレックスアイテム内のアンカータグの内側に画像を垂直にセンタリングする

Question

フレックスレイアウトのセル内に画像を中央に配置しようとしています。フレックス方向が行に設定され、行内の各セルの高さが最大高さその行の画像の

ローの他のより小さいイメージは、高さに関して中央に配置する必要があります。

縦の揃えと余白でセンタリングを試しても動作しないようです。ここで

function getRandomSize(min, max) { 
 
return Math.round(Math.random() * (max - min) + min); 
 
} 
 

 
for (var i = 0; i < 10; i++) { 
 
var width = getRandomSize(200, 400); 
 
var height = getRandomSize(200, 400); 
 
$('#photos').append('<a style="display:inline-block" href="http://www.google.com" ><img src="http://www.lorempixel.com/'+width+'/'+height+'/cats" alt="pretty kitty"></a>'); 
 
}

 #photos{ 
 
      display: flex; /* Initializing a flexbox formatting context */ 
 
      flex-flow : row wrap ;/*flex-direction and flex-wrap*/ 
 
     } 
 

 
     #photos a:nth-child(odd){ 
 
      flex : 0 0 20%; 
 
      background-color: aqua; 
 
      border:1px solid black; 
 
      height:auto; 
 
     } 
 

 
     #photos a:nth-child(even){ 
 
      flex : 0 0 20%; 
 
      background-color: red; 
 
      border:1px solid yellow; 
 
      height:auto; 
 
     } 
 

 

 

 
     #photos img{ 
 
      width : 100%; 
 
      padding: auto; 
 
      vertical-align: middle; 
 
     } 
 

 

 
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="photos"> 
 
    </div>

https://jsfiddle.net/k3gbquda/

をjsfiddleするためのリンクが可能これはありますか？誰かが解決策を提案できますか？ ありがとう

Answer 1

"A" の要素がネストされたフレキシボックスではないインラインブロックする必要がありますしてみてください。 https://jsfiddle.net/1wpgo45t/7/

：

#photos { 
     display: flex; /* Initializing a flexbox formatting context */ 
     flex-flow: row wrap ;/*flex-direction and flex-wrap*/ 
    } 

    #photos a { 
     flex : 0 0 20%; 
     display: flex; 
     align-items: center; 
    } 

    #photos a:nth-child(odd) { 
     background-color: aqua; 
     border:1px solid black; 
    } 

    #photos a:nth-child(even) { 
     background-color: red; 
     border:1px solid yellow; 
    } 

    #photos img { 
     width : 100%; 
     height: auto; 
     display: block; 
    } 

修正フィドルを参照してください。

Answer 2

あなたが探しているのとまったく同じalign-itemsというフレックスボックスプロパティがあります。

​​

Answer 3

この

#photos a:nth-child(odd){ 
     flex : 0 0 20%; 
     background-color: aqua; 
     border:1px solid black; 
     height:auto; 
     margin:auto; 
}