我想发个短信（字幕文本）在图像中有一个对齐中心。即使它被最小化或最大化，也需要居中。我试图使用transform并将left和top：50%放在屏幕上，但它不起作用，并保持溢出（图片外）.有人能帮我吗？我尝试了所有在网络上的东西，也使用了这个平台上的示例，但它不起作用。
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
.title {
position: absolute;
text-align: center;
color: #fff;
font-weight: 900;
font-style: bold;
font-size: 1rem;
font-family: b;
}
.fa {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.fa img {
width: 30%;
height: 1.5rem;
display: block;
margin: 0 auto;
}
.subtitle {
position: relative;
display: flex;
margin: 0.5rem;
text-align: center;
align-items: center;
}
.subtitle img {
width: 23%;
}
.subtitle .subtitle-text{
position: absolute;
text-align: center;
justify-content: center;
color: #fff;
font-weight: 900;
font-style: bold;
font-size: 0.8rem;
font-family: b;
left: 4%;
}
.main {
padding: 1rem 0;
overflow-x: hidden;
}
.main .box{
width: 100%;
margin: 0 auto;
text-align: center;
color: #292B32;
margin-right: 1.5rem;
font-size: 0.65rem;
font-weight: 400;
font-family: b;
}
</style>
</head>
<body>
<div class="main">
<div class="fa">
<div class="title">title</div>
<img src="https://www.researchgate.net/profile/Maximus-Tamur/publication/354575794/figure/fig2/AS:1067950245154821@1631630588806/Rectangle-b-Cut-out-the-existing-rectangular-shape-through-one-of-the-diagonal-lines-c.png" alt="" />
</div>
<div class="cont">
<div class="subtitle">
<div class="subtitle-text">subtext</div>
<img src="https://www.researchgate.net/profile/Maximus-Tamur/publication/354575794/figure/fig2/AS:1067950245154821@1631630588806/Rectangle-b-Cut-out-the-existing-rectangular-shape-through-one-of-the-diagonal-lines-c.png" alt="" />
</div>
</div>
</div>
</body>
</html>字符串
1条答案
按热度按时间lg40wkob1#
您可以通过修改
.subtitle-text类的CSS来将字幕文本居中。您将left属性设置为4%，这将文本向右移动4%，而不是使用left:4%，您可以使用left:11%并添加bottom:10%;和transform: translateX(-50%)来将文本置于其容器内的居中位置这是更改后的CSS脚本：
字符串
您也可以添加
width:100%以确保文本占据其容器的整个宽度。