中心图标+ css悬停图片上的文字

Question

美好的一天，当我悬停图像时，我试图将图标和文本居中。我的问题是他们似乎并没有居中。生病显示我的HTML和CSS。另外，我使用的是Bootstrap4。我尝试使用“ overlay”和“ overlay-text”标签将图标和文本居中，但是它们都悬浮在顶部。任何帮助将不胜感激。

代码：

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #f08300;
}

.container:hover .overlay {
  opacity: 1;
}

.overlay-text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.spacer {
  margin: 20px 0px 20px 0px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-12 text-align-center">
      <h2 class="bold_font">BROWSE OUR CARDS</h2><br>
    </div>

    <div class="col-md-4 col-xs-12">

      <img class="img-responsive" src="img/_stock_mwc_beauty.jpg">
      <div class="overlay">
        <img src="img/icon-beauty-white.png" class="img-responsive center-block card-icon-sm">
        <div class="spacer overlay-text">BEAUTY</div>
      </div>

    </div>

    <div class="col-md-4 col-xs-12">
      <img class="img-responsive" src="img/_stock_mwc_health.jpg">
    </div>
    <div class="col-md-4 col-xs-12">
      <img class="img-responsive" src="img/_stock_mwc_wellness.jpg">
    </div>
  </div>
</div>

Answer 1

您在正确的轨道上，将要在叠加层上显示的内容包裹起来，并在其中添加CSS并相应地调整图像和文本。

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #f08300;
}

.container:hover .overlay {
  opacity: 1;
}

.overlay-content {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.spacer {
  margin: 20px 0px 20px 0px;
}

<div class="container">
  <div class="row">
    <div class="col-md-12 text-align-center">
      <h2 class="bold_font">BROWSE OUR CARDS</h2><br>
    </div>

    <div class="col-md-4 col-xs-12">

      <img class="img-responsive" src="img/_stock_mwc_beauty.jpg">
      <div class="overlay">
        <div class="overlay-content">
          <img src="img/icon-beauty-white.png" class="img-responsive center-block card-icon-sm">
          <div class="spacer overlay-text">BEAUTY</div>
        </div>
      </div>

    </div>

    <div class="col-md-4 col-xs-12">
      <img class="img-responsive" src="img/_stock_mwc_health.jpg">
    </div>
    <div class="col-md-4 col-xs-12">
      <img class="img-responsive" src="img/_stock_mwc_wellness.jpg">
    </div>
  </div>
</div>

Answer 2

尝试对容器使用flexbox，并将图标和图标文字包装到类为div的div上。 .icon-wrapper：

.overlay {
  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #f08300;
}

.overlay-text {
  color: white;
  font-size: 20px;
  text-align: center;
}

.icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Answer 3

您可以将图像内容包装在relative元素中，然后从文本中删除absolute位置。

类似这样的内容：http://jsfiddle.net/tus0kdcq/

更新：http://jsfiddle.net/jimmyLi/kruz6eqn