Question

div.st-header-image {
  width: 100%;
  background-color: #a7b885;
  margin: 0px;
  text-align: center;
  overflow: hidden;
}

div.st-header-image p.st-description {
  margin: 0px;
  color: red;
  font-size: 40px;
  line-height: 40px;
  vertical-align: middle;
}

div.st-header-image ::before {
  content: " ";
  padding-top: 40%;
  display: inline-block;
}

<body>
<div class="st-header-image">
        <p class="st-description">Header Image</p>
</div>
</body>

我正在尝试创建一个段落，该段落也必须在具有:: before样式的div内，因此当我增加或减少分辨率时，它会更改大小。

我尝试使用不同的溢出，不同的显示...也尝试使用calc（（100％-40px）/ 2）来定位顶部/底部，但似乎也不起作用。

div.st-header-image
  {
    width:100%;
    background-color: rgb(167, 184, 133);
    margin:0px;
    text-align: center;
    overflow: hidden;

      p.st-description
      {
          margin:0px;
          color:red;
          font-size:40px;
          line-height: 40px;
          vertical-align: middle;
      }
      ::before
      {
        content: " ";
        padding-top: 40%;
        display: inline-block;
      } 
  }

p元素位于类st-header-image的div中

div响应迅速，但段落始终显示在div下方，而不是在其中央...

Answer 1

您要完成的工作是使div的顶部具有一个响应空间，并且在响应期间该段落会停留在中间。我修复了没有private function match(string $pattern, string $target): bool { $pattern = preg_replace_callback('/([^*])/', function($m) {return preg_quote($m[0], '/');}, $pattern); $pattern = str_replace('*', '.*', $pattern); return (bool) preg_match('/^' . $pattern . '$/i', $target); }伪元素的代码。

使用div填充并稍加定位即可达到相同的功能。

我在repl.it here

上共享了代码

这是您需要的CSS：

::before

Answer 2

查看您的代码，我假设您正在使用CSS预处理程序SASS。这样，您需要在“ :: before”选择器之前附加“ p”元素

**p::before** {
        content: " ";
        padding-top: 40%;
        display: inline-block;
      }

或者您可以使用与号将其包括在内

 p.st-description
      {
          margin:0px;
          color:red;
          font-size:40px;
          line-height: 40px;
          vertical-align: middle;

      &::before
      {
        content: " ";
        padding-top: 40%;
        display: inline-block;
      } 
}

Answer 3

您应该使用display flex。它允许始终居中。

使用此代码。

HTML

<body>
<div class="st-header-image">
        <p class="st-description">Header Image</p>
</div>
</body>

css

div.st-header-image {
  width: 100%;
  background-color: #a7b885;
  margin: 0px;
  text-align: center;
  overflow: hidden;
}

div.st-header-image p.st-description {
  margin: 0px;
  color: red;
  font-size: 40px;
  line-height: 40px;
  display:flex;
  display:-webkit-flex;
  align-items:center;
  -webkit-align-items:center;
  justify-content: center;
  -webkit-justify-content: center;
}

div.st-header-image ::before {
  content: " ";
  padding-top: 40%;
  display: inline-block;
}

无法在:: before div中将段落居中

3 个答案:

这是您需要的CSS：