垂直對齊另一個div旁邊的div

Question

請檢查此Sample Fiddle。

你會注意到我有兩個colums，並列和標題下的內容。我正在嘗試將Lorem Ipsum與該段的垂直中心對齊。

我認爲垂直對齊設置到列1會，但事實並非如此。

.col1-row1 { 
    margin-top: 2%; 
    display: inline-block; 
    background: transparent; 
    padding: 5px; 
    width:45%; 
    margin-left: 4%; 
    color: #f8981d; 
    font-weight: bold; 
    font-size: 20px; 
    line-height: 20px; 
    text-align: center; 
} 

想法？

Answer 1

設置「col1-row1」和「col2-row1」以顯示：table-cell而不是inline-block，然後包括vertical-align：middle。

Answer 2

只需在樣式表中將col1-row1和col2-row1類的這個css替換掉，就可以在你的小提琴中正常工作。

.col1-row1 { 
      margin-top: 2%; 
     display: inline-block; 
     background: transparent; 
     padding: 5px; 
     width:45%; 
     color: #f8981d; 
     font-weight: bold; 
     font-size: 20px; 
     line-height: 20px; 
     vertical-align:middle; 
     text-align: center; 
    } 

.col2-row1 { 
    margin-top: 2%; 
    display: inline-block; 
    background: transparent; 
    padding: 5px; 
    width: 45%; 
    color: #f8981d; 
    font-weight: bold; 
    font-size: 20px; 
    line-height: 20px; 
    vertical-align:middle; 
    text-align: center; 
} 

Answer 3

如果能預先確定文本的右手塊的高度，你可以做類似如下（我將它設置爲206px）：

<style> 
#container { 
    width:940px; 
    margin:0 auto; 
} 
div.left { 
    width:460px; 
    margin-right:20px; 
    float:left; 
    display:inline; 
} 
div.right { 
    width:460px; 
    float:left; 
    display:inline; 
} 
div.clear { 
    clear: both; 
} 
div.left p { 
    height:206px; 
    line-height: 206px; 
} 
div.right p { 
    height:206px; 
} 
</style> 

<div id="container"> 
    <div class="left"> 
     <h1>Exemption Reason</h1> 
     <p>Lorem ipsum</p> 
    </div> 

    <div class="right"> 
     <h1>Documentation Required</h1> 
     <p>sit amet, consectetur adipiscing elit. Proin at nunc convallis, venenatis lectus auctor, porta nisi. Donec sit amet mauris non justo ultrices dignissim sed at ipsum. Aliquam accumsan faucibus nunc, id pulvinar massa consequat at. Pellentesque sed mauris leo. Nullam pulvinar sit amet tortor a suscipit. Ut varius et eros a aliquam. Donec tortor nisi, tristique at feugiat at, malesuada eu tortor. Pellentesque quis sapien mauris. Mauris pulvinar posuere auctor. Praesent nec felis at mi ultricies elementum. Nulla vitae pharetra mi, et semper ipsum. Etiam eget tristique mi. Vivamus rutrum ipsum dapibus enim malesuada sodales. Nullam rhoncus elit ut condimentum tincidunt. Quisque dapibus lorem eget euismod mattis. Praesent id consectetur urna.</p> 
    </div> 

    <div class="clear"></div> 
</div> 

如果高度在右欄的段落是動態的，不能事先確定，你可以使用JavaScript（這裏我使用的是jQuery）：

<style> 
#container { 
    width:940px; 
    margin:0 auto; 
} 
div.left { 
    width:460px; 
    margin-right:20px; 
    float:left; 
    display:inline; 
} 
div.right { 
    width:460px; 
    float:left; 
    display:inline; 
} 
div.clear { 
    clear: both; 
} 
</style> 

<div id="container"> 
    <div class="left"> 
     <h1>Exemption Reason</h1> 
     <p>Lorem ipsum</p> 
    </div> 

    <div class="right"> 
     <h1>Documentation Required</h1> 
     <p>sit amet, consectetur adipiscing elit. Proin at nunc convallis, venenatis lectus auctor, porta nisi. Donec sit amet mauris non justo ultrices dignissim sed at ipsum. Aliquam accumsan faucibus nunc, id pulvinar massa consequat at. Pellentesque sed mauris leo. Nullam pulvinar sit amet tortor a suscipit. Ut varius et eros a aliquam. Donec tortor nisi, tristique at feugiat at, malesuada eu tortor. Pellentesque quis sapien mauris. Mauris pulvinar posuere auctor. Praesent nec felis at mi ultricies elementum. Nulla vitae pharetra mi, et semper ipsum. Etiam eget tristique mi. Vivamus rutrum ipsum dapibus enim malesuada sodales. Nullam rhoncus elit ut condimentum tincidunt. Quisque dapibus lorem eget euismod mattis. Praesent id consectetur urna.</p> 
    </div> 

    <div class="clear"></div> 
</div> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    var target_height = $('div.right p').height()+'px'; 
    $('div.left p').css({ 
     'height': target_height, 
     'lineHeight': target_height 
    }); 
}); 
</script>