多中間垂直圖像與段落使用網格對齊960

我想對齊 - 垂直中間的圖像與paragrapth，但它不起作用。我正在使用container_16作爲body。這裏是我的代碼：多中間垂直圖像與段落使用網格對齊960

HTML：

<div id class="container_16"> 
     <header class="grid_16"> 
      <!-- Header -->   
     </header> 
     <div class="grid_16"> 
      <!-- Nav Menu --> 
     </div> 
     <div class="grid_14 alpha block"> 
      <!-- Body --> 
       <div class="grid_3 alpha"> 
        <img src="img/test1.png" alt="test1.png" class="midImg"> 
       </div> 
       <div class = "grid_11 omega"> 
        <p>Mea ne integre temporibus contentiones, menandri adipisci percipitur in mel. Quo ferri veritus suscipiantur ei, sit ex voluptua consequuntur. Diceret menandri inimicus mel cu. No quod libris inimicus pro, pri postea patrioque omittantur no, nihil legimus urbanitas eos ut. Duo tota inani eu, id minim semper inermis vix.Mea ne integre temporibus contentiones, menandri adipisci percipitur in mel. Quo ferri veritus suscipiantur ei, sit ex voluptua consequuntur. Diceret menandri inimicus mel cu. No quod libris inimicus pro, pri postea patrioque omittantur no, nihil legimus urbanitas eos ut. Duo tota inani eu, id minim semper inermis vix.</p> 
       </div>  
     </div> 


      <div class="grid_16 alpha"> 
       <footer> 
      <!-- Footer --> 
       </footer> 
      </div>

CSS：

.block { 
    margin:0 auto; 
    background: rgba(119,115,111,0.24); 
    font-family:"Comfortaa", cursive; 
    font-weight:300; 
    box-shadow: 10px 10px 5px #888888; 
    padding-top: 15px; 
    padding-bottom: 15px; 
    padding-left: 15px; 
    padding-right: 15px;  
} 

    .midImg { 
     vertical-align: middle; 
    }

我沒有在我的代碼包括grid960類的其餘部分。

這裏的結果我得到： https://www.dropbox.com/s/30dpc3afl0le72l/result.jpg

來源

2015-07-21 Korte

'垂直align'僅適用於與**相同的父元素**和也僅針對內聯（或內聯塊）元素/文本。您可能需要提出另一種選擇。 –

margin-top:auto; 
margin-bottom:auto;

在你的身體

來源

2015-07-21 13:00:41

多中間垂直圖像與段落使用網格對齊960

回答

相關問題