使用Bootstrap 3對齊標題，圖標和內容

Question

使用Bootstrap 3.3.7，在一個有四列的部分中，我試圖弄清楚如何對齊a）不同長度的標題，b）所在的圖標在標題下面，以及c）圖標下方的無序列表。我使用Flex來保持所有四列的高度相同。

標題應該垂直對齊到中間。這是我到目前爲止（JSFiddle鏈接：https://jsfiddle.net/Codewalker/8xay3cow/）。

<div class="container"> 
     <div class="row is-flex vdivider"> 
      <div class="col-sm-3 col-xs-6"> 
       <div class="secCallOut2"> 
        <h4 class="text-center">Column Number 1</h4> 
        <p class="text-center"><img src="https://www.msd134.org/Static/V2_19_07/GlobalAssets/Images/Icons/100/video-library-placeholder.png"></p> 
        <ul> 
         <li>Bullet One</li> 
         <li>Bullet Two</li> 
         <li>Bullet Three</li> 
         <li>Bullet Four</li> 
         <li>Bullet Five</li> 
         <li>Bullet Six</li> 
         <li>Bullet Seven</li> 
         <li>Bullet Eight</li> 
         <li>Bullet Nine</li> 
         <li>Bullet Ten</li> 
         <li>Bullet Eleven</li> 
        </ul> 
       </div> 
      </div> 
      <div class="col-sm-3 col-xs-6"> 
       <div class="secCallOut2"> 
        <h4 class="text-center">Elongated Second Column Title</h4> 
        <p class="text-center"><img src="https://www.msd134.org/Static/V2_19_07/GlobalAssets/Images/Icons/100/video-library-placeholder.png"></p> 
        <ul> 
         <li>Bullet One</li> 
         <li>Bullet Two</li> 
         <li>Bullet Three</li> 
         <li>Bullet Four</li> 
         <li>Bullet Five</li> 
         <li>Bullet Six</li> 
         <li>Bullet Seven</li> 
         <li>Bullet Eight</li> 
         <li>Bullet Nine</li> 
         <li>Bullet Ten</li> 
         <li>Bullet Eleven</li> 
         <li>Bullet Twelve</li> 
        </ul> 
       </div> 
      </div> 
      <div class="col-sm-3 col-xs-6"> 
       <div class="secCallOut2"> 
        <h4 class="text-center">Three Communications</h4> 
        <p class="text-center"><img src="https://www.msd134.org/Static/V2_19_07/GlobalAssets/Images/Icons/100/video-library-placeholder.png"></p> 
        <ul> 
         <li>Bullet One</li> 
         <li>Bullet Two</li> 
         <li>Bullet Three</li> 
         <li>Bullet Four</li> 
         <li>Bullet Five</li> 
         <li>Bullet Six</li> 
         <li>Bullet Seven</li> 
         <li>Bullet Eight</li> 
         <li>Bullet Nine</li> 
         <li>Bullet Ten</li> 
         <li>Bullet Eleven</li> 
        </ul> 
       </div> 
      </div> 
      <div class="col-sm-3 col-xs-6"> 
       <div class="secCallOut2"> 
        <h4 class="text-center">Column Four</h4> 
        <p class="text-center"><img src="https://www.msd134.org/Static/V2_19_07/GlobalAssets/Images/Icons/100/video-library-placeholder.png"></p> 
        <ul> 
         <li>Bullet One</li> 
         <li>Bullet Two</li> 
         <li>Bullet Three</li> 
         <li>Bullet Four</li> 
         <li>Bullet Five</li> 
         <li>Bullet Six</li> 
         <li>Bullet Seven</li> 
         <li>Bullet Eight</li> 
         <li>Bullet Nine</li> 
         <li>Bullet Ten</li> 
         <li>Bullet Eleven</li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 

CSS

.secCallOut2 { 
height:100%; 
margin-top:0; 
padding:20px; 
} 
.secCallOut2 h4 { 
    color:#009FDA; 
    margin:0 14px 12px; 
} 
.secCallOut2 p { 
    color:#fff; 
} 
.row.is-flex { 
    display: flex; 
    flex-wrap: wrap; 
} 
.row.is-flex > [class*='col-'] { 
    display: flex; 
    flex-direction: column; 
} 
.row.is-flex { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
} 
.row.is-flex > [class*='col-'] { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
} 
.row.vdivider [class*='col-']:not(:last-child):after { 
    background: #e0e0e0; 
    width: 1px; 
    content: ""; 
    display:block; 
    position: absolute; 
    top:0; 
    bottom: 0; 
    right: 0; 
    height:95%; 
} 

Answer 1

我想這個解決方案會爲你工作，但你需要定義的平均身高爲h4元素，我在這裏

height: 90px; vertical-align: middle; display: table-cell;