無法在flex div容器內的兩行中顯示h3標籤

Question

我正在使用以下示例，並且需要在頁面中爲每個項目使用兩個標題。 <div> div內li被定義爲flex，如果我添加多個元素，它顯示爲兩列，但我想在兩行和中心水平對齊&垂直。

如果我改變彎曲以阻止或其他財產則標題移動到頂部，而我中心希望他們

不知道如何用最少的CSS修復

http://codepen.io/anon/pen/XNqYWd

<ul class="cbp-rfgrid"> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Heading One</h3> 
     <h3>Date</h3> 
     </div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
      <h3>Heading One</h3> 
     <h3>Date</h3> 
     </div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
      <h3>Heading One</h3> 
     <h3>Date</h3> 
     </div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Heading One</h3> 
     <h3>Date</h3> 
     </div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
</ul> 

Answer 1

使用flex-direction和justify-content財產，如：

.cbp-rfgrid li a div { 
    flex-direction: column; /* Flex Direction Column */ 
    justify-content: center; /* Vertically Aligns Content (on flex-direction: column) */ 
} 

看一看片斷如下（使用全屏）：

.cbp-rfgrid { 
 
\t margin: 35px 0 0 0; 
 
\t padding: 0; 
 
\t list-style: none; 
 
\t position: relative; 
 
\t width: 100%; 
 
} 
 

 
.cbp-rfgrid li { 
 
\t position: relative; 
 
\t float: left; 
 
\t overflow: hidden; 
 
\t width: 16.6666667%; /* Fallback */ 
 
\t width: -webkit-calc(100%/6); 
 
\t width: calc(100%/4); 
 
    margin:1px; 
 
} 
 

 
.cbp-rfgrid li a, 
 
.cbp-rfgrid li a img { 
 
\t display: block; 
 
\t width: 100%; 
 
\t cursor: pointer; 
 
} 
 

 
.cbp-rfgrid li a img { 
 
\t max-width: 100%; 
 
} 
 

 
/* Flexbox is used for centering the heading */ 
 
.cbp-rfgrid li a div { 
 
\t position: absolute; 
 
\t left: 20px; 
 
\t top: 20px; 
 
\t right: 20px; 
 
\t bottom: 20px; 
 
\t background: rgba(71,163,218,0.2); 
 
\t display: -webkit-flex; 
 
\t display: -moz-flex; 
 
\t display: -ms-flex; 
 
\t display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
\t -webkit-align-items: center; 
 
\t -moz-align-items: center; 
 
\t -ms-align-items: center; 
 
    align-items: center; 
 
    text-align: center; 
 
    opacity: 0; 
 
} 
 

 
.cbp-rfgrid li a:hover div { 
 
\t opacity: 1; 
 
} 
 

 
.cbp-rfgrid li a div h3 { 
 
\t width: 100%; 
 
\t color: #fff; 
 
\t text-transform: uppercase; 
 
\t font-size: 1.4em; 
 
\t letter-spacing: 2px; 
 
\t padding: 0 10px; 
 
} 
 

 
/* Example for media query: change number of items per row */ 
 

 
@media screen and (max-width: 1190px) { 
 
\t .cbp-rfgrid li { 
 
\t \t width: 20%; /* Fallback */ 
 
\t \t width: -webkit-calc(100%/5); 
 
\t \t width: calc(100%/5); 
 
\t } 
 
} 
 

 
@media screen and (max-width: 945px) { 
 
\t .cbp-rfgrid li { 
 
\t \t width: 25%; /* Fallback */ 
 
\t \t width: -webkit-calc(100%/4); 
 
\t \t width: calc(100%/4); 
 
\t } 
 
} 
 

 
@media screen and (max-width: 660px) { 
 
\t .cbp-rfgrid li { 
 
\t \t width: 33.3333333%; /* Fallback */ 
 
\t \t width: -webkit-calc(100%/3); 
 
\t \t width: calc(100%/3); 
 
\t } 
 
} 
 

 
@media screen and (max-width: 660px) { 
 
\t .cbp-rfgrid li { 
 
\t \t width: 33.3333333%; /* Fallback */ 
 
\t \t width: -webkit-calc(100%/3); 
 
\t \t width: calc(100%/3); 
 
\t } 
 
} 
 

 
@media screen and (max-width: 400px) { 
 
\t .cbp-rfgrid li { 
 
\t \t width: 50%; /* Fallback */ 
 
\t \t width: -webkit-calc(100%/2); 
 
\t \t width: calc(100%/2); 
 
\t } 
 
} 
 

 
@media screen and (max-width: 300px) { 
 
\t .cbp-rfgrid li { 
 
\t \t width: 100%; 
 
\t } 
 
}

<ul class="cbp-rfgrid"> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Heading One</h3> 
 
     <h3>Date</h3> 
 
     </div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
      <h3>Heading One</h3> 
 
     <h3>Date</h3> 
 
     </div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
      <h3>Heading One</h3> 
 
     <h3>Date</h3> 
 
     </div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Heading One</h3> 
 
     <h3>Date</h3> 
 
     </div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
</ul>

希望這有助於！