다른 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을 입력 한 다음 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>