css - 将一个 div 与另一个 div 垂直对齐

Question

请查看此示例小提琴。

你会注意到我有两个并排的列，标题下有内容。我正在尝试将 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>