Вертикально выровнять div рядом с другим div

Question

Пожалуйста, ознакомьтесь с этим Sample Fiddle.

Вы заметите, что у меня есть два столбца, бок о бок и содержимое под заголовками. Я пытаюсь выровнять 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 вместо встроенного блока, а затем включите вертикальное выравнивание: среднее.

Answer 2

просто замените этот css для классов col1-row1 и col2-row1 в вашей таблице стилей, это прекрасно работает на вашей скрипке.

.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>