Question

我在index.html页面上有这个部分

        <!-- Top of the Page -->
<div id="home" class="container header">
    <div class="row">
        <div class="image-header margin-0">
            <div class="overlay"></div>
            <div class="headertext">
                <h1>EXAMPLE</h1>
            </div>
        </div>
    </div>
</div>

我试图在main.css中定位'EXAMPLE'这个词，但我遇到了麻烦。无论我尝试什么，它似乎都以父div为目标，或者根本不针对它。

我尝试过定位： .headertext .h1 .headertext h1 p h1

我基本上尝试了每一种组合，但我无法达到我想要的效果。

我的目标是拥有一张图片，然后在图片顶部使用不透明度的黑色叠加层，然后在页面中央放置一些文字。

谢谢大家！

编辑：删除了h1周围的p标签

edit2：我实际上已经弄明白了。有一个margin-top自动添加到h1。我猜它是引导程序的默认值？我将margin-top设置为0，现在工作正常。谢谢！

Answer 1

您无法在<h1>内使用<p>，因为这是无效的HTML。虽然您可以使用具有更大字体大小的锚点或跨度。

请尝试下面的内容。

＆＃13;

.headertext h1 {
  color: green;
}

＆＃13;

<div id="home" class="container header">
  <div class="row">
    <div class="image-header margin-0">
      <div class="overlay"></div>
      <div class="headertext">
        <h1>EXAMPLE</h1>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

我实际上已经明白了。有一个margin-top自动添加到h1。我猜它是引导程序的默认值？我将margin-top设置为0，现在工作正常。谢谢！

在div中面对h1的麻烦

2 个答案: