我无法将文本放在图像的中心（图像上方），并且在最小化或最大化时不会改变位置

问题描述 投票：0回答：1

我想在具有对齐中心的图像内放置文本（字幕文本）。即使它被最小化或最大化，它也需要居中。我尝试使用变换并放置 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>
html css image text position
1个回答
0
投票

您可以通过修改 

.subtitle-text
类的 CSS 来使字幕文本居中。您将 
left
属性设置为 4%，这会将文本向右推 4%，您可以使用 
left:4%
代替使用 
left:50%
并添加 
transform: translateX(-50%)
将文本在其容器内居中

这是更改后的 CSS 脚本：

.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: 50%;
  transform: translateX(-50%);
  width: 100%; 
}

您还可以添加 

width:100%
以确保文本占据其容器的整个宽度。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.