Question

我想构建一个包含两页全高的简单网页。这两个页面底部有一个居中的块和一个小文本（带图标）。

<div id="how-to" class="section how-to">
    <div id="title" class="title">title</div>
    <div id="code" class=" code">title</div>
    <div id="view-more" class="view-more">
        <span>View intructions</span>
        <br/> <!-- other option ? -->
        <i class="fa fa-arrow-down view-more--arrow"></i>
    </div>
</div>
<div id="instructions" class="section instructions">
    <div id="intructions" class="instructions">instructions</div>
    <div id="view-more" class="view-more">
        <span>Go back</span><br/>
        <i class="fa fa-arrow-up view-more--arrow"></i>
    </div>
</div>


body {
    font-family: "Source Sans Pro","Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.3rem;
    background-color: #FFF;
}
.section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-flow: column wrap;
    align-content: space-between;
}
.title {
    margin-top: auto;
    font-weight: bold;
    font-size: 4rem;
}
.view-more {
    color: #D1D1D1;
    text-align: center;
    cursor: pointer;
    margin-top: auto;
    margin-bottom: 10px;
}
.view-instructions {
    margin-top: auto;
}
.view-more--arrow {
    font-size: 2rem;
}

正如您在第二页上看到的那样，文本不居中。我错过了什么？

额外问题

它没有响应：尝试缩小页面，内容将显示在两列

Answer 1

您还没有margin-top auto .title给出第二页标题，就像您使用.instructions { margin-top: auto; }一样。

{{1}}

使用CSS flex的两个全高页面

1 个答案: