在影像上的垂直組中對準文本中心

我有一個html頁面，其相應的css代碼如下：

<div class="container">/span>
    <div class="row mt-4"/span>>

      <div class="col-sm-8"/span>>
        <h2>blah blah</h2> 
        <p>blah blah</p>
      </div>/span>

      <div class="col-sm-4"> 

        <h2>聯系我們</h2> 

        <address>/span>
          <strong>blah blah</strong> 
        </address>/span>
        
        <div class="row">/span>

          <div class="col-6 col-sm-12 col-md-8"/span>>
            < a target="_blank" rel="noopener noreferrer" href="https: //www. blahblah/home/">。
              <img src="media/logos/blah. png" class="img-fluid mb-2">
            </a>/span>
          </div>/span>
         
          <div class="col-6 col-sm-12 col-md-8"/span>>
            <text>Sponsored by:</text>/span>
            < a target="_blank" rel="noopener noreferrer" href="https: //www. blahblah/">            
              <img src="media/logos/blah. png" class="img-fluid mb-2">
            </a>/span>
          </div>/span>

        </div>/span>
      </div>/span>

    </div>/span>
</div>/span>

text {
  position: absolute;
  字體大小：小。
  背景: blanchedalmond;
}

我把我的css代碼改成了下面的內容，以確保文本之間有足夠的空間。

我把我的css代碼改為如下，以確保text標簽之間的文本居中，但沒有任何效果...

text {
  position: absolute;
  字體大小：小。
  背景: blanchedalmond;

  text-align: center;
  vertical-align: middle;
  justify-content: 居中。
  align-items: center;

這四行單獨或組合在一起都沒有起到作用。我做錯了什么，以至于文本不能居中對齊？

uj5u.com熱心網友回復：

前兩個屬性是關于文本在一行中的位置。

text-align: center;
vertical-align: middle;

text-align，在行中設定水平放置，所以如果容器是100%寬，它將在中心結束。

vertical-align，是在文本行上垂直放置文本。因此，為了使它位于你的影像的中心，那么行高應該與你的影像相同。

justify-content: center;
align-items: center;

與flexbox display:flex一起使用。 你還需要使用position:relative和absolute來把元素放在彼此的上面。

.image-conatiner {
position:relative;
}
.text {
position: absolute;
top: 0;
left: 0;
右：0;
底部。0;

display: flex;
justify-content: center;
align-items: center;
}

uj5u.com熱心網友回復：

你可以給父級的屬性，如display: inline-flex, align-items: center，所以它將永遠保持它們在彼此的中心。

像這樣：

text {
  position: absolute;
  字體大小: small;
  background: blanchedalmond;
}

.parent-div {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

<div class="container"> /span>
  <div class="row mt-4"/span>>

    <div class="col-sm-8"/span>>
      <h2>blah blah</h2> 
      <p>blah blah</p>
    </div>/span>

    <div class="col-sm-4"> 

      <h2>聯系我們</h2> 

      <address>/span>
          <strong>blah blah</strong> 
        </address>/span>

      <div class="row">/span>

        <div class="col-6 col-sm-12 col-md-8"/span>>
          < a target="_blank" rel="noopener noreferrer" href="https: //www. blahblah/home/">。
            <img src="https://i.picsum.photos/id/387/536/354. jpg?hmac=Zs1KZbc0jXe2zZP7yKL_OrUKxdUVFH0LqLoegVZnIuA" class="img-fluid mb-2">
          </a>/span>
        </div>/span>

        <div class="col-6 col-sm-12 col-md-8 parent-div"/span>>
          <text>Sponsored by:</text>/span>
          < a target="_blank" rel="noopener noreferrer" href="https: //www. blahblah/">
            <img src="https://i.picsum.photos/id/387/536/354. jpg?hmac=Zs1KZbc0jXe2zZP7yKL_OrUKxdUVFH0LqLoegVZnIuA" class="img-fluid mb-2">
          </a>/span>
        </div>/span>

      </div>/span>
    </div>/span>

  </div>/span>
</div>/span>

Working Fiddle/a>

標籤：

上一篇：在選擇中顯示所有選項，無需點擊

下一篇：如何制作錨定標簽的保存檔案？