Question

我正在尝试将文本span.headline放到图像的中心。它卡在左上角，不会移动，或显示在屏幕上。我只能使用控制台看到它。

我不知道问题是什么。

这是html

        <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
            <a class="navbar-brand" href="#">Cowleys Coding Bootcamp</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="index.html">Home </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="faq.html">FAQ<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="classroom.html">Classroom</a>
                    </li>
                </ul>
                <form class="form-inline mt-2 mt-md-0">
                    <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
        </nav>

        <div class="container">
            <div class="faqimage">
            <span class="headline">Frequeently Asked Questions</span>

        </div>
          <h2 class="faq">Accordion Example</h2>
          <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
            <div id="accordion">
                <div class="card">
                    <div class="card-header">
                        <a class="card-link" data-toggle="collapse" href="#collapseOne">
                          Who is This Programme For?
                        </a>
                    </div>
                      <div id="collapseOne" class="collapse" data-parent="#accordion">
                        <div class="card-body">You don't need developer experience. If you're passionate about technology and dedicated enough to learn - then this course for you. This programme is all about getting back as much as you put in. We give you the tools and the framework - all you need is commitment.</div>
                       </div>
                </div>
</div>

这是该网站的CSS。

.faq {
    margin-top: 5%
}

.faqimage {
    background: url("images/dbhd.jpg");
    background-size: cover;
    background-position:center;
    background-repeat: no-repeat;
    height: 70vh;    max-width: 100%;
}

.headline {
    color:white;
}

Answer 1

您没有将文字定位在除左上角之外的任何位置。关闭.faqimage范围周围的.headline div，然后将.faqimage div设为flexbox：

.faqimage {
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("images/dbhd.jpg");
    background-size: cover;
    background-position:center;
    background-repeat: no-repeat;
    height: 70vh;    
    max-width: 100%;
}

Answer 2

添加.faqimage的样式：

.faqimage {
    // your code here
    position: relative;
}

然后为.headline添加：

.headline {
    // your code
    display: inline-block;
    position: absolute;
    // this two lines for center element vertically...
    top: 50%;
    transform: translateY(-50%);
    // ...and this for center horizontally
    left: 50%;
    transform: translateX(-50%);
}

当然，在.container之后关闭你.headline。

文字似乎超出了范围

2 个答案: