文本未以最小高度图像为中心

Question

我正在努力寻找使我的文本在图像中间（垂直和水平）居中的最佳方式。我认为我遇到的问题是我设置的图像有一个最小高度属性。与桌面设备相比，平板电脑和移动设备的最小高度属性发生了变化。谁能想出一个解决方案来使其居中并使其响应？

.home-section-image {
    /* The image used */
    background-image: linear-gradient(
      rgba(8, 8, 8, 0.15), 
      rgba(8, 8, 8, 0.35)
    ),url("https://images.pexels.com/photos/814499/pexels-photo-814499.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    opacity: .80;
    border-top: 1px solid #000;
    
    /* Set a specific height */
    min-height: 840px; 
    
    /* Create the image scrolling effect */
    /*background-attachment: fixed;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 69px;
  }

  .centered-image-text {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #BCE4B8;
    -webkit-text-stroke: black 1.5px;
    text-align: center; 
  } /* Edits text overlaying image positioning, colour of text and adds stroke */

  .centered-text1 {
    font-size: 6.2vw;
    font-family: 'DM Sans', sans-serif;
  } /* Edits sizing of the first line of text displayed over the image */

  .centered-text2 {
    font-size: 4.6vw;
    margin-top: -1.5%;
    font-family: 'DM Sans', sans-serif;
  } /* Edits sizing and margin of the second line of text displayed over the image */

  .centered-text3 {
    font-size: 4vw;
    font-family: 'DM Sans', sans-serif;
  } /* Edits sizing of the third line of text displayed over the image */
  
  @media only screen and (max-width: 1606px) {
  
  .centered-image-text {
    top: 34%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #BCE4B8;
    -webkit-text-stroke: black 2px;
    text-align: center;
  } /* Edits text overlaying image positioning, colour of text and adds stroke */

  .home-section-image {
    /* Set a specific height */
    min-height: 740px; 
  }
  
  .centered-text1 {
    font-size: 10vw;
  } /* Edits sizing of the first line of text displayed over the image */

  .centered-text2 {
    font-size: 6vw;
    margin-top: -1.5%;
  } /* Edits sizing and margin of the second line of text displayed over the image */

  .centered-text3 {
    font-size: 5vw;
  } /* Edits sizing of the third line of text displayed over the image */
  
  }
  
  @media only screen and (max-width: 815px) {
  
    .home-section-image {
    /* Set a specific height */
    min-height: 360px;  /* May change back to original height: 100%; */
    background-image: linear-gradient(
      rgba(8, 8, 8, 0.15), 
      rgba(8, 8, 8, 0.35)
    ),url("https://images.pexels.com/photos/814499/pexels-photo-814499.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    margin-top: 61px;
  }

  .centered-image-text {
    top: 18%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #BCE4B8;
    -webkit-text-stroke: black 2px;
    text-align: center;
  } /* Edits text overlaying image positioning, colour of text and adds stroke */

  .centered-text1 {
    font-size: 10vw;
  } /* Edits sizing of the first line of text displayed over the image */

  .centered-text2 {
    font-size: 8.5vw;
    margin-top: -1.5%;
  } /* Edits sizing and margin of the second line of text displayed over the image */

  .centered-text3 {
    font-size: 8vw;
  } /* Edits sizing of the third line of text displayed over the image */
  
  }

<section id="home" class="home-section">
      <div class="home-section-image">
      <div class="centered-image-text">
        <div class="centered-text1">PositiveTalkwithTC</div>
        <div class="centered-text2">CBT Therapist</div> 
        <div class="centered-text3">Random Text</div> 
      </div> 
      </div>
</section>

Answer 1

您需要将 .home-section-image 设置为 position:relative

.home-section-image {
    /* The image used */
    background-image: linear-gradient(
      rgba(8, 8, 8, 0.15), 
      rgba(8, 8, 8, 0.35)
    ),url("https://images.pexels.com/photos/814499/pexels-photo-814499.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    opacity: .80;
    border-top: 1px solid #000;
    
    /* Set a specific height */
    min-height: 840px; 
    
    /* Create the image scrolling effect */
    /*background-attachment: fixed;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 69px;
    position:relative;
  }

  .centered-image-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #BCE4B8;
    -webkit-text-stroke: black 1.5px;
    text-align: center; 
  } /* Edits text overlaying image positioning, colour of text and adds stroke */

  .centered-text1 {
    font-size: 6.2vw;
    font-family: 'DM Sans', sans-serif;
  } /* Edits sizing of the first line of text displayed over the image */

  .centered-text2 {
    font-size: 4.6vw;
    margin-top: -1.5%;
    font-family: 'DM Sans', sans-serif;
  } /* Edits sizing and margin of the second line of text displayed over the image */

  .centered-text3 {
    font-size: 4vw;
    font-family: 'DM Sans', sans-serif;
  } /* Edits sizing of the third line of text displayed over the image */
  
  @media only screen and (max-width: 1606px) {
  
  .centered-image-text {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #BCE4B8;
    -webkit-text-stroke: black 2px;
    text-align: center;
  } /* Edits text overlaying image positioning, colour of text and adds stroke */

  .home-section-image {
    /* Set a specific height */
    min-height: 740px; 
  }
  
  .centered-text1 {
    font-size: 10vw;
  } /* Edits sizing of the first line of text displayed over the image */

  .centered-text2 {
    font-size: 6vw;
    margin-top: -1.5%;
  } /* Edits sizing and margin of the second line of text displayed over the image */

  .centered-text3 {
    font-size: 5vw;
  } /* Edits sizing of the third line of text displayed over the image */
  
  }
  
  @media only screen and (max-width: 815px) {
  
    .home-section-image {
    /* Set a specific height */
    min-height: 360px;  /* May change back to original height: 100%; */
    background-image: linear-gradient(
      rgba(8, 8, 8, 0.15), 
      rgba(8, 8, 8, 0.35)
    ),url("https://images.pexels.com/photos/814499/pexels-photo-814499.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    margin-top: 61px;
  }

  .centered-image-text {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #BCE4B8;
    -webkit-text-stroke: black 2px;
    text-align: center;
  } /* Edits text overlaying image positioning, colour of text and adds stroke */

  .centered-text1 {
    font-size: 10vw;
  } /* Edits sizing of the first line of text displayed over the image */

  .centered-text2 {
    font-size: 8.5vw;
    margin-top: -1.5%;
  } /* Edits sizing and margin of the second line of text displayed over the image */

  .centered-text3 {
    font-size: 8vw;
  } /* Edits sizing of the third line of text displayed over the image */
  
  }

<section id="home" class="home-section">
      <div class="home-section-image">
      <div class="centered-image-text">
        <div class="centered-text1">PositiveTalkwithTC</div>
        <div class="centered-text2">CBT Therapist</div> 
        <div class="centered-text3">Random Text</div> 
      </div> 
      </div>
</section>

Answer 2

如果我理解你的问题，你可以使用 flexbox 来解决这个问题，你的代码中的一些东西并不是获得这个结果所必需的。

这是我所做的：

我将这些属性添加到文本元素的 parent 元素中 .home-section-image:

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

我从 children 个元素 cenetered-text*

中删除了所有 transform、left 和 right 属性

这将使文本保持在 parent（即 .home-section-image）

的中心

Obs.: 这只有效，因为 parent 有特定的高度。

.home-section-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* The image used */
    background-image: linear-gradient(
      rgba(8, 8, 8, 0.15), 
      rgba(8, 8, 8, 0.35)
    ),url("https://images.pexels.com/photos/814499/pexels-photo-814499.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    opacity: .80;
    border-top: 1px solid #000;
    
    /* Set a specific height */
    min-height: 840px; 
    
    /* Create the image scrolling effect */
    /*background-attachment: fixed;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 69px;
  }

  .centered-image-text {
    color: #BCE4B8;
    -webkit-text-stroke: black 1.5px;
    text-align: center; 
  } /* Edits text overlaying image positioning, colour of text and adds stroke */

  .centered-text1 {
    font-size: 6.2vw;
    font-family: 'DM Sans', sans-serif;
  } /* Edits sizing of the first line of text displayed over the image */

  .centered-text2 {
    font-size: 4.6vw;
    margin-top: -1.5%;
    font-family: 'DM Sans', sans-serif;
  } /* Edits sizing and margin of the second line of text displayed over the image */

  .centered-text3 {
    font-size: 4vw;
    font-family: 'DM Sans', sans-serif;
  } /* Edits sizing of the third line of text displayed over the image */
  
  @media only screen and (max-width: 1606px) {
  
  .centered-image-text {
    
    -webkit-text-stroke: black 2px;
    text-align: center;
  } /* Edits text overlaying image positioning, colour of text and adds stroke */

  .home-section-image {
    /* Set a specific height */
    min-height: 740px; 
  }
  
  .centered-text1 {
    font-size: 10vw;
  } /* Edits sizing of the first line of text displayed over the image */

  .centered-text2 {
    font-size: 6vw;
    margin-top: -1.5%;
  } /* Edits sizing and margin of the second line of text displayed over the image */

  .centered-text3 {
    font-size: 5vw;
  } /* Edits sizing of the third line of text displayed over the image */
  
  }
  
  @media only screen and (max-width: 815px) {
  
    .home-section-image {
    /* Set a specific height */
    min-height: 360px;  /* May change back to original height: 100%; */
    background-image: linear-gradient(
      rgba(8, 8, 8, 0.15), 
      rgba(8, 8, 8, 0.35)
    ),url("../images/testmobile.jpg");
    margin-top: 61px;
  }

  .centered-image-text {
    color: #BCE4B8;
    -webkit-text-stroke: black 2px;
    text-align: center;
  } /* Edits text overlaying image positioning, colour of text and adds stroke */

  .centered-text1 {
    font-size: 10vw;
  } /* Edits sizing of the first line of text displayed over the image */

  .centered-text2 {
    font-size: 8.5vw;
    margin-top: -1.5%;
  } /* Edits sizing and margin of the second line of text displayed over the image */

  .centered-text3 {
    font-size: 8vw;
  } /* Edits sizing of the third line of text displayed over the image */
  
  }

<section id="home" class="home-section">
      <div class="home-section-image">
      <div class="centered-image-text">
        <div class="centered-text1">PositiveTalkwithTC</div>
        <div class="centered-text2">CBT Therapist</div> 
        <div class="centered-text3">Random Text</div> 
      </div> 
      </div>
</section>

文本未以最小高度图像为中心

Text isn't centring on min-height image

html

css

responsive