Question

当图像悬停时，会出现一个按钮;按钮朝左，我需要将它放在中间。我正在使用HTML5，CSS3和bootsrap v3.3.4。一切都正常，除了没有居中的按钮。我错过了什么？在此先感谢您的帮助：）

<div class="row">
<div class="col-sm-3">
<figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
<figcaption>
<h4>
<a href="#">
                                    Test       
</a>
</h4>
<p>
                                test
</p>
</figcaption>
<div class="img-wrapper">
<img src="image1.jpg" class="img-responsive" alt="title" >
<div class="overlay">
<div class="buttons">       
<a target="_blank" href="">Discover</a>
</div>
</div>
</div>
<figcaption>
<h4>
<a href="#">
                                    test       
</a>
</h4>
<p>
                                test
</p>
</figcaption>
</figure>
</div>

CSS

figure {
background: #fff;
margin-bottom: 45px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.04), 0 2px 10px 0 rgba(0, 0, 0, 0.06);
}

figure .img-wrapper {
position: relative;
overflow: hidden;
}

figure img {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition: -webkit-transform 400ms;
transition: transform 400ms;
}

figure:hover img {
-webkit-transform: scale3d(1.2, 1.2, 1);
transform: scale3d(1.2, 1.2, 1);
}

figure:hover .overlay {
opacity: 1;
}

figure:hover .overlay .buttons a {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

figure .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
text-align: center;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
-webkit-transition: opacity 400ms;
transition: opacity 400ms;
}

figure .overlay a {
display: inline-block;
color: #fff;
padding: 10px 23px;
line-height: 1;
border: 1px solid #fff;
border-radius: 0px;
margin: 4px;
-webkit-transform: scale3d(0, 0, 0);
transform: scale3d(0, 0, 0);
-webkit-transition: all 400ms;
transition: all 400ms;
}

figure .overlay a:hover {
text-decoration: none;
}

figure .overlay:hover a {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

figure .buttons {
position: absolute;
top: 45%;
left: 24%;
}

figure figcaption {
padding: 20px 25px;
margin-top: 0;
color: #666;
}

figure figcaption h4 {
margin: 0;
}

figure figcaption h4 a {
color: #02bdd5;
}

figure figcaption p {
font-size: 16px;
margin-bottom: 0;
margin-top: 5px;
}

Answer 1

如果您使用flexbox，这将更容易实现（即使使用bootstrap的响应式设计），并且all modern browsers

支持

为此，请按以下步骤更改您的CSS：

figure .buttons {
  /* remove all styles */
}

figure .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  -webkit-transition: opacity 400ms;
  transition: opacity 400ms;

  /* Added styles: */
  display: flex;
  justify-content: center;
  align-items: center;
}

（如果您向.buttons元素添加更多按钮，这也会有效）

这是一个带有工作演示的Codepen

在悬停时，我无法让按钮在图像上居中

1 个答案: