將圖像垂直居中在Flex項目中的錨標記內

我想將柔性佈局的單元格內的圖像置於柔性方向設置爲行的位置，同一行中的每個單元格的高度等於最大高度該行的圖像。將圖像垂直居中在Flex項目中的錨標記內

該行的其他較小圖像應該相對於高度居中。

嘗試使用垂直對齊和邊距居中，似乎不起作用。

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>

這裏是的jsfiddle

https://jsfiddle.net/k3gbquda/

這是可能的鏈接？有人可以提出一個解決方案嗎？謝謝

來源

2017-02-25 basum

「A」元素應該是嵌套Flexbox的不內嵌塊。

#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; 
    }

瞭解改琴：https://jsfiddle.net/1wpgo45t/7/

來源

2017-02-25 13:07:15 Mik

有一個名爲align-items的flexbox屬性，它正是您在尋找的內容。

來源

2017-02-25 12:03:02 Sylvain

嘗試這種

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

來源

2017-02-25 12:08:13 linc

將圖像垂直居中在Flex項目中的錨標記內

回答

相關問題