Html Can'；t将段落居中放在：：div之前
Html Can'；t将段落居中放在：：div之前,html,css,sass,Html,Css,Sass,div.st-header-image{ 宽度：100%； 背景色：#a7b885； 边际：0px； 文本对齐：居中； 溢出：隐藏； } 分区st-标题-图像p.st-说明{ 边际：0px； 颜色：红色； 字体大小：40px； 线高：40px； 垂直对齐：中间对齐； } div.st-header-image:：before{ 内容：“； 垫面：40%； 显示：内联块； } 标题图像 查看您的代码，我假设您使用的是CSS预处理器SASS。因此，您需要在“选择器”之前添加“p”元素： 或者你可以
div.st-header-image{
宽度：100%；
背景色：#a7b885；
边际：0px；
文本对齐：居中；
溢出：隐藏；
}
分区st-标题-图像p.st-说明{
边际：0px；
颜色：红色；
字体大小：40px；
线高：40px；
垂直对齐：中间对齐；
}
div.st-header-image:：before{
内容：“；
垫面：40%；
显示：内联块；
}
标题图像
查看您的代码，我假设您使用的是CSS预处理器SASS。因此，您需要在“选择器”之前添加“p”元素：
或者你可以像这样用符号把它包括进去
p.st-description
{
margin:0px;
color:red;
font-size:40px;
line-height: 40px;
vertical-align: middle;
&::before
{
content: " ";
padding-top: 40%;
display: inline-block;
}
}
你想要完成的是让div在顶部有一个响应的空格，并且在响应过程中段落也会粘在中间。
我修复了没有：：before
伪元素的代码
使用div填充和少量定位可以实现相同的功能
我在repl.it上共享了代码
以下是您需要的CSS：
div.st-header-image{
宽度：100%；
背景色：#a7b885；
边际：0px；
文本对齐：居中；
溢出：隐藏；
垫面：40%；
位置：相对位置；
}
p、 st描述{
边际：0px；
颜色：红色；
字体大小：40px；
位置：绝对位置；
排名：0；
左：0；
右：0；
文本对齐：居中；
垫面：15%；
}
您应该使用display flex。它始终允许中心位置
使用此代码
HTML
<body>
<div class="st-header-image">
<p class="st-description">Header Image</p>
</div>
</body>
提供一个（这需要包含最少的HTML来演示问题）并将其表示为一个在sass中是这样吗？如果您真的想居中，只需尝试div{display:flex}div p{margin:auto}
它将大大简化您的方法。然后只需在div或p元素中添加一些填充。但是，你应该在这里加上你的HTML，并把你尝试的代码转换成一个片段，这样我们就可以看到你认为错误的东西。@ doc Hang-Yes……@昆廷：我补充说：以前是div不是段落…因此，div change大小随屏幕分辨率的改变而改变。然而，：：before本身，不附加到元素，是没有意义的，不会显示出来。因此，将其附加到div
或p
，不要在div:：before
之前执行div:：before
是的，我修复了它，但结果仍然相同。。。可能是我试图在图像填充中写入“标题图像”的问题…谢谢，这很有魅力。。。我放弃了它，选择了静态高度而不是响应高度，但这一个完美地解决了问题。。。非常感谢你。
<body>
<div class="st-header-image">
<p class="st-description">Header Image</p>
</div>
</body>
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;
}