gpt4 book ai didi

html - 无法将段落居中::在 div 之前

转载 作者:太空宇宙 更新时间:2023-11-04 06:01:25 24 4
gpt4 key购买 nike

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 下方而不是在它的中心...

最佳答案

你想要完成的是让 div 在顶部有一个响应空间,并且在它的响应期间段落坚持在中间。我修复了没有 ::before 伪元素的代码。

可以使用 div 的填充和一点定位来实现相同的功能。

我在 repl.it 上分享了代码 here

这是您需要的 CSS:

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

p.st-description {
margin: 0px;
color: red;
font-size: 40px;
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;
padding-top: 15%;
}

关于html - 无法将段落居中::在 div 之前,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57268679/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com