图像内的文字没有居中答案

【问题标题】：The text inside the image doesn't go center图像内的文字没有居中
【发布时间】：2022-01-31 08:30:54
【问题描述】：

即使我已经放置了 text-align 和 align-items，我的网站图像中的文本也不会居中。请帮助我，这是我的任务。我为此使用了 html 和 css。

.projname img {
  width: 100%;
  height: 40vh;
}

.proj-title {
  position: absolute;
  top: 20%;
  text-align: center;
  color: white;
}

.proj-title h1 {
  font-size: 500%;
  text-transform: uppercase;
  text-shadow: 1px 1px 10px #000;
  color: white;
  text-align: center;
}

.proj-title h3 {
  font-size: 200%;
  font-weight: 500;
  text-shadow: 1px 1px 10px #000;
  padding-bottom: 1rem;
  color: white;
  text-align: center;
}

<div id="home">
  <div class="projname">
    <img src="background.jpg">
    <div class="proj-title">
      <h1 class="display-2">Boostrap</h1>
      <h3>Lorem ipsum, lorem ipsum dolor sit amet</h3>
    </div>
  </div>
</div>

【问题讨论】：

用class="display-2" 更正你的代码元素应该是<h1> 而不是<hr>，不是吗？
"text inside the image" 你不能用 CSS 控制图片的内容

标签： html css image responsive

【解决方案1】：

添加图片并将其用作背景图片怎么样？请参阅下面的 sn-p 以供参考：

.projname img {
  width: 100%;
  height: 40vh;
}

.proj-title {
  position: absolute;
  top: 20%;
  text-align: center;
  color: white;
  background: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.camera-rumors.com%2Fwp-content%2Fuploads%2F2018%2F02%2Fsony-a7iii-sample-image-3.jpg&f=1&nofb=1");
  background-size: 100% auto;
  padding: 1rem;
}

.proj-title h1 {
  font-size: 500%;
  text-transform: uppercase;
  text-shadow: 1px 1px 10px #000;
  color: white;
  text-align: center;
}

.proj-title h3 {
  font-size: 200%;
  font-weight: 500;
  text-shadow: 1px 1px 10px #000;
  padding-bottom: 1rem;
  color: white;
  text-align: center;
}

<div id="home">
  <div class="projname">
    <div class="proj-title">
      <h1 class="display-2">Boostrap</h1>
      <h3>Lorem ipsum, lorem ipsum dolor sit amet</h3>
    </div>
  </div>
</div>

如果你真的想走你的路线，那么你只能通过使用位置来使文本居中继续，如下所示：

.projname img {
  width: 100%;
  height: 60vh;
}

.proj-title {
  position: absolute;
  inset: 0 0 15% 0;
  text-align: center;
  color: white;
}

.proj-title h1 {
  font-size: 500%;
  text-transform: uppercase;
  text-shadow: 1px 1px 10px #000;
  color: white;
  text-align: center;
}

.proj-title h3 {
  font-size: 200%;
  font-weight: 500;
  text-shadow: 1px 1px 10px #000;
  padding-bottom: 1rem;
  color: white;
  text-align: center;
}

<div id="home">
  <div class="projname">
    <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.camera-rumors.com%2Fwp-content%2Fuploads%2F2018%2F02%2Fsony-a7iii-sample-image-3.jpg&f=1&nofb=1">
    <div class="proj-title">
      <h1 class="display-2">Boostrap</h1>
      <h3>Lorem ipsum, lorem ipsum dolor sit amet</h3>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

您可以将图像添加为 background-image 为 <div class="projname"> 。
并从 .proj-title 中删除 position : absolute

.projname{
    background-image: url(https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg);
}
.proj-title {
   text-align: center;
   color: white;
}
.proj-title h1 {
   font-size: 500%;
   text-transform: uppercase;
   text-shadow: 1px 1px 10px #000;
   color: white;
   text-align: center;
}
.proj-title h3 {
   font-size: 200%;
   font-weight: 500;
   text-shadow: 1px 1px 10px #000;
   padding-bottom: 1rem;
   color: white;
   text-align: center;
}

<div id="home">
                    <div class="projname">
                            <img src="background.jpg">
                            <div class="proj-title">
                                <h1 class="display-2">Boostrap</h1>
                                <h3>Lorem ipsum, lorem ipsum dolor sit amet</h3>
                           </div>
                        </div>
                    </div>

【讨论】：