html - 如何在 Bootstrap 4 中向我的 HTML 元素添加响应式居中文本？

Question

我想知道如何将响应居中的文本元素添加到我的 <a>元素？它不应受叠加颜色的影响。如果有额外覆盖 div 的干净替代方法，请告诉我。我正在使用 Bootstrap 4。

http://jsfiddle.net/or74zoy0/1

HTML

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <a class="item" href="#">
        <div class="image">
          <img src="https://lorempixel.com/output/technics-q-c-640-480-4.jpg" alt="" />
          <div class="overlay"></div>
        </div>
      </a>
    </div>
  </div>
</div>

CSS

.image { position: relative;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; right:0; bottom:0; background-color: rgba(0,0,0,0.5);}

Answer 1

这是一种方法:

HTML

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <a class="item" href="#">
        <div class="image">
          <img src="https://lorempixel.com/output/technics-q-c-640-480-4.jpg" alt="" />
          <div class="overlay"></div>
        </div>
        <span class="title">Centered Text</span>
      </a>
    </div>
  </div>
</div>

CSS

.image { position: relative;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; right:0; bottom:0; background-color: rgba(0,0,0,0.5);}
.title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

或者用 Bootstrap 类解决:

HTML

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <a class="item" href="#">
        <div class="image">
          <img src="https://lorempixel.com/output/technics-q-c-640-480-4.jpg" alt="" />
          <div class="overlay"></div>
        </div>

        <div class="title d-flex justify-content-center align-items-center">
            Centered Text
        </div>
      </a>
    </div>
  </div>
</div>

CSS

.image { position: relative;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; right:0; bottom:0; background-color: rgba(0,0,0,0.5);}
.title { position: absolute; top: 0; left: 0; right:0; bottom:0;}