影像內的文字不居中

即使我已經放置了 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">
                                <hr class="display-2">Boostrap</h1>
                                <h3>Lorem ipsum, lorem ipsum dolor sit amet</h3>
                           </div>
                        </div>
                    </div>

uj5u.com熱心網友回復：

如何添加和使用圖片作為背景影像呢？請參閱下面的代碼段供您參考：

.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://www.camera-rumors.com/wp-content/uploads/2018/02/sony-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://www.camera-rumors.com/wp-content/uploads/2018/02/sony-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>

uj5u.com熱心網友回復：

您可以添加影像background-image為<div >. 并從中
洗掉position : absolute.proj-title

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

標籤：

上一篇：停止重疊html和css的文本

下一篇：如何檢查當前選定選項的值（使用Javascript）