Question

以下代码按预期工作（全宽背景图像，水平和垂直对齐的文本与其重叠），但我想做一些更改。我没有#banner的背景图片，而是想将其切换为颜色，并在div之前添加.teaser，width: 1366px，height: 100%父级，并包括设置为cover的背景图像。我仍然需要.teaser垂直对齐。我一直在努力解决这个问题，所以任何帮助都会非常感激。 http://jsfiddle.net/exczzyje/

HTML

<div id="banner">
    <div id="valign">
        <div class="teaser">
            <h1>Title</h1>
            <p>Tagline</p>
        </div>
    </div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
}

#banner {
    width: 100%;
    height: 67%;
    height: calc(67% - 123px);
    background: #000 url('images/banner.jpg') 50% 0 no-repeat;
    background-size: cover;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    position: relative;
}

#banner[id] {
    display: table;
    position: static;
}

#banner #valign {
    width: 100%;
    position: absolute;
    text-align: center;
    top: 50%;
}

#banner #valign[id] {
    display: table-cell;
    position: static;
    vertical-align: middle;
}

#banner .teaser {
    width: 960px;
    margin: -12px auto 0 auto;
    padding: 21px 0;
    position: relative;
    top: -50%;
}

#banner .teaser h1 {
    color: #fff;
    font-size: 45px;
}

#banner .teaser h1:after {
    content: "";
    display: block;
    width: 42px;
    margin: 18px auto;
    border-bottom: 3px solid #bfbfbf;
}

#banner .teaser p {
    color: #808080;
    font-size: 24px;
    margin: 0;
    text-align: center;
}

Answer 1

你在寻找这样的东西：

参见 JSFiddle

CSS：

* {
    margin: 0; padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

#banner {
    width: 100%;
    height: 100%;
    background-color: black;
    padding: 0;
}

#banner #valign {
    width: 100%;
    height: 100%;
}

#newDiv {
    height: 100%;
    width: 1366px;
    display: table;
    margin: 0 auto;
    background: #000 url('http://www.psdgraphics.com/file/colorful-triangles-background.jpg') 50% 0 no-repeat;
    background-size: cover;
}

#banner .teaser {
    display: table-cell;
    width: 960px;
    margin: 0 auto;
    padding: 21px 0;
    text-align: center;
    vertical-align: middle;
}

#banner .teaser h1 {
    color: #fff;
    font-size: 45px;
}

#banner .teaser h1:after {
    content: "";
    display: block;
    width: 42px;
    margin: 18px auto;
    border-bottom: 3px solid #bfbfbf;
}

#banner .teaser p {
    color: #808080;
    font-size: 24px;
    margin: 0;
}

Answer 2

只需在外围添加一个容器。

更新了HTML

<div id="container">
    <div id="banner">
        <div id="valign">
            <div class="teaser">
                <h1>Title</h1>
                <p>Tagline</p>
            </div>
        </div>
    </div>
</div>

更新了CSS

#container {
    width: 100%;
    height: 67%;
    height: calc(67% - 123px);
    background: #000;
    margin: 0 auto;
}

#banner {
    width: 1366px;
    height: 100%;
    background: #000 url('images/banner.jpg') 50% 0 no-repeat;
    background-size: cover;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    position: relative;
}

无法添加100％高度的div，并保持现有内容垂直对齐

2 个答案: