图片内的文字没有居中

Question

即使我已经放置了文本对齐和对齐项，我网站中图片内的文本仍未居中。请帮助我，这是我的任务。为此，我使用了 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>

Answer 1

添加并使用该图片作为背景图片如何？请参阅下面的代码片段以供参考：

.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>

Answer 2

您可以为 <div class="projname"> 添加图像 background-image。
并从 .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>

图片内的文字没有居中

The text inside the image doesn't go center

html

css

image

responsive