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>

垂直对齐另一个div旁边的div

3 个答案: