Question

简而言之，我无法让我的内容div在页面中垂直对齐 - 我被告知为了使其工作，我的容器必须有一个非自动的高度值，所以我去解决了这个问题，但它仍然无法正常工作，任何人都可以帮助我吗？

HTML

<div class="units-container" style="overflow: hidden;">
    <div id="home" class="section">
        <div id="home-content">
            <section id="intro">
                <section>
                    <h3>Lorem Ipsum Dolor Amet (and some other latin things too)</h3>
                </section>
        </div>
    </div>
    <div id="portfolio"></div>
    <div id="about"></div>
    <div id="blog"></div>
    <div id="contact"></div>
</div>

CSS

#home {
    background-color: #1a1a1a;
    color: #fff;
}
.section {
    padding: 0;
    margin: 0;
    display: block;
    overflow: hidden;
}
#home #home-content {
    vertical-align: middle;
    text-align: center;
}
#intro {
    width: 60%;
    margin: 0 auto;
}
#home-content h3 {
    font-family:'amblelight_condensed', 'Courier';
    display: block;
    color: #fff;
    font-size: 2.17em;
    line-height: normal;
}

JQuery（如果需要）

jQuery(document).ready(function ($) {

    /*--------------------------
    Resize Div(s) when Window Resizes
    ---------------------------*/

    $(".section").css("height", $(window).height());
    $(".section").css("width", $(window).width());
    $(window).resize(function () {
        $('.section').css('height', $(window).height());
        $(".section").css("width", $(window).width());
    });
});

http://jsfiddle.net/sWeLw/

Answer 1

我会这样做，尝试一个课程并将其设为“left：0px”

<head>
<style>
.left
{
position:absolute;
left:0px;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>

<body>
<div class="left">
<p>content</p>
<p>more content</p>
</div>
</body>

Answer 2

您可以使用表格：

HTML：

<div id="home-content">
    <table><tr><td>
        <section id="intro">
            <section>
                <h3>Lorem Ipsum Dolor Amet (and some other latin things too)</h3>
            </section>
        </section>
    </td></tr></table>
</div>

和CSS：

#home #home-content {
    vertical-align: middle;
    text-align: center;
    height: 100%;
}

#home-content table, #home-content tr, #home-content td{
    height: 100%;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
}

Answer 3

相对于您的样本。添加以下CSS：

#home, #home-content {position:relative;}

和JS：

$('#home-content').css("top", ($('#home').height() - $('#home-content').height()) / 2);

CSS中垂直对齐的问题

3 个答案: