0

In short, I'm having trouble getting my content div to align vertically within a page - I was told that in order for it to work, my container would have to have a height value that isn't auto, so I went and fixed that, but it's still not working, could anyone help me out?

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 (if needed)

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/

4

3 回答 3

0

您可以使用表：

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;
}
于 2013-08-11T06:06:19.803 回答
0

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

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

和JS：

$('#home-content').css("top", ($('#home').height() - $('#home-content').height()) / 2);
于 2013-08-11T06:09:02.250 回答
0

我会这样做，尝试一个类并使其成为“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>
于 2013-08-11T05:58:19.633 回答