在图像上的垂直组中对齐文本中心答案

【问题标题】：Align text center in a vertical group over an image在图像上的垂直组中对齐文本中心
【发布时间】：2021-09-22 14:51:49
【问题描述】：

我有一个html 页面如下，其对应的css 代码：

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

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

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

        <h2>Contact Us</h2>

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

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

        </div>
      </div>

    </div>
</div>

text {
  position: absolute;
  font-size: small;
  background: blanchedalmond;
}

我将css 代码更改为以下内容，以确保text 标签之间的文本居中，但没有任何效果...

text {
  position: absolute;
  font-size: small;
  background: blanchedalmond;

  text-align: center;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
}

这四个添加的行单独或组合都不能解决问题。文本没有在中心对齐，我做错了什么？

【问题讨论】：

你有绝对定位的元素并且没有给它任何宽度 - 所以宽度将由一种称为收缩适合的计算方法确定。如果元素的宽度仅与其文本内容开始时要求的一样宽 - 那么尝试将文本“居中”在该宽度内，当然不会取得任何成果。

标签： html css bootstrap-5

【解决方案1】：

您可以将display: inline-flex, align-items: center 之类的属性提供给父级，以便它们始终保持在彼此的中心。

像这样：

text {
  position: absolute;
  font-size: small;
  background: blanchedalmond;
}

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

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

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

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

      <h2>Contact Us</h2>

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

      <div class="row">

        <div class="col-6 col-sm-12 col-md-8">
          <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>
        </div>

        <div class="col-6 col-sm-12 col-md-8 parent-div">
          <text>Sponsored by:</text>
          <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>
        </div>

      </div>
    </div>

  </div>
</div>

Working Fiddle

【讨论】：

【解决方案2】：

前 2 个属性用于将文本放置在一行上。

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

text-align，将位置设置在水平线上，因此如果容器为 100% 宽，它将在中心结束。

vertical-align 是在文本行上垂直放置文本。因此，要使其成为图像的中心，那么 line-height 应该与您的图像相同。

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

与 flexbox display:flex 一起使用。您还需要使用 position: relative 和 absolute 将元素放在一起。

.image-conatiner {
position:relative;
}
.text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

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

【讨论】：