1

このSample Fiddleを確認してください。

横に 2 つの列があり、ヘッダーの下にコンテンツがあることがわかります。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;
}

アイデア？

4

3 に答える 3

1

"col1-row1" と "col2-row1" を inline-block の代わりに display: table-cell に設定し、vertical-align: middle を含めます。

于 2013-09-23T18:46:52.897 に答える
0

右側のテキスト ブロックの高さを事前に決定できる場合は、次のようなことができます (私は 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>
于 2013-09-23T19:34:34.380 に答える
0

スタイルシートの 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;
}
于 2013-09-23T19:29:08.873 に答える