Question

Here's a fiddle（此帖子底部的代码重复）

该网站是一个由多个这样的整页<section>组成的垂直卷轴，我希望将内容集中在每个面板上，同时将标题固定在顶部，并将链接固定在底部。

问题是，只要我将translateX应用到<h1>以使其居中，就会混淆.rbn :after和:before伪的堆叠。

（如果删除前9行CSS，你会看到功能区应该是什么样子）

此问题有“修复”，described here

当我尝试沿着这些方向做任何事情时，我：

会在文本/轮廓上出现可怕的模糊，
我失去了scale(.999)通常给我的色带的光滑边缘。

这是在Chrome 35中，我甚至还没有开始使用其他浏览器。

所以我认为将h1与position:absolute;left:50%;transformX(-50%)对中是不可取的。即使它可以工作，但显然这是一个至少有一个主流浏览器目前存在错误/困难的领域，所以我更愿意找到另一种解决方案。

我的其他选择是什么？ ：

html, body {
    height:100%;
    text-align:center;
    padding:0;
    margin:0
}
section {
    width:100%;
    height:100%;
    display:table;
    background:#def;
    padding:120px 0 80px;
    position:relative
}
h1 {
    position:absolute;
    top:20px;
    left:50%;
    transform:translateX(-50%)
}
.content {
    background:#f2f2f2;
    display:table-cell;
    vertical-align:middle;
    padding:0 50px;
}
.downlink {
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%)
}
/* ribbon styles */
 .rbn {
    position:absolute;
    background:#0f1111;
    color:#fff;
    padding:0.1em 1em;
    border:1px solid #888;
    box-shadow:0px 0px 0px 3px #0f1111;
}
.rbn::before, .rbn::after, .rbn>b::before, .rbn>b::after {
    content:'';
    display:block;
    position:absolute;
    bottom:-.35em;
    transform:scale(.999)
}
.rbn::before, .rbn::after {
    border:1em solid #0f1111;
    z-index:-2
}
.rbn::before {
    left:-1em;
    border-width:.9em 1.6em .9em 0.25em;
    border-left-color:rgba(255, 255, 255, 0)
}
.rbn::after {
    right:-1em;
    border-width:.9em 0.25em .9em 1.6em;
    border-right-color:rgba(255, 255, 255, 0)
}
.rbn>b::before, .rbn>b::after {
    border:1px solid;
    z-index:-1;
    border-color:#3d3d3d rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0)
}
.rbn>b::before {
    left:0;
    border-width:.35em 0 0 .85em
}
.rbn>b::after {
    right:0;
    border-width:.35em .85em 0 0
}

Answer 1

我建议将你的部分分成三部分。标题，中间和页脚。

<style>
    html, body {
        height: 100%;
        text-align: center;
        padding: 0;
        margin: 0
    }

    h1, h2, p {
        margin: 0;
    }

    .header, .footer {
        width: 100%;
        height: 10%;
    }

    .content {
        width: 100%;
        height: 80%;
        display: table;
        background: #def;
        padding:0 ;
    }

    .inner {
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }
</style>

<section>
    <div class="header">
        <h1>This is a heading</h1>
    </div>
    <div class="content">
        <div class="inner">
            <h1><b>This is a heading</b></h1>
            <h2>test</h2>
            <p>A mix of content in here.  h2, p, div, etc.</p>
            <div>
                <p>blah</p>
                <p>blah</p>
                <p>blah</p>
            </div>
        </div>
    </div>
    <div class="footer">
        <p class="downlink"><a href="#nextsection">V</a></p>
    </div>
</section>
<section>
    <div class="header">
        <h1>This is a heading</h1>
    </div>
    <div class="content">
        <div class="inner">
            <h1><b>This is a heading</b></h1>
            <h2>test</h2>
            <p>A mix of content in here.  h2, p, div, etc.</p>
            <div>
                <p>blah</p>
                <p>blah</p>
                <p>blah</p>
            </div>
        </div>
    </div>
    <div class="footer">
        <p class="downlink"><a href="#nextsection">V</a></p>
    </div>
</section>

这样你就不必担心绝对定位。它还使文本中心等更容易。

我怎么能把这个放在中心，而不会弄乱我的伪元素？

1 个答案: