Question

所以我在其他帖子上尝试了一些建议，但是当我将文本移动到标题区域的顶部中心时，我似乎只是强迫我的整个图像区域变小。

我想将'we are ..'文本放在顶部中心（图像上方的黄色文字）。我尝试过使用填充/边距以及对齐内容，但它只是强制整个区域变得更小..有关如何强制文本向上的任何建议吗？

以下是区域部分的代码：

results

这是我正在编辑的CSS（它控制文本位置，但也是容器..所以我不确定我是否应该对H2标签做一些事情或者可能为此编制一个新的CSS标签？

 <section class="meta-wrapper parallax" style="background-image: url('content/about_bg.png');" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="20">
            <div id="page_header">
                <div class="container text-center">
                    <h2><span>We are</span><br>Outside The Line</h2>
                </div>
            </div><!-- end page_header -->
        </section><!-- end section -->

我曾经尝试过纵向对齐等，但这只是什么都没做..我猜我需要玩填充等等，但我似乎有点卡住让它移动而不移动其他所有东西。

Answer 1

改变这个：

#page_header{
    padding:30rem 0 ;
}

到此：

#page_header {
    padding: 0 0 60rem;
}

这个想法是保留填充的总量（60rem），但是将所有填充移动到底部而不是均匀地移动到顶部和底部。

Answer 2

像这样替换你的css：

#page_header .container {
    z-index: 1;
    position: absolute;
    top: 20px;
    left: 45%;
    text-align: center;
}

Answer 3

首先感谢两位回答的人的帮助。

在玩#page_header后，我设法让标题显示在我想要的位置。

我使用的代码是;

    #page_header
    {
        padding: 10rem 0 60rem!important;
    }

将文本移动到div的中心顶部，而不使div更小

3 个答案: