html - 将按钮置于流体图像的中央

Question

最近几天，我尝试将按钮置于流体图像的中央。到目前为止，位置是固定的和静态的。相关的 HTML 部分如下所示:

<ul class="moodlegrid sectionwrap">
  <li>
    <a class="ajax1" href="project1.html">
      <img title="Project 1" src="img/projectblur.jpg" alt="Project 1" />
      <img title="Project 1" src="img/project.jpg" alt="Project 1" />
      <span class="openoverlay">Click</span>
    </a>
  </li>
</ul>

CSS 看起来像这样:

.moodlegrid{
    li{
        a{
            position: relative;
            display:block;
            width: 100%;
            img:nth-child(1){
                display:block;
            }
            img:nth-child(2){
                display: none;
            }
            span{
                display:none;
            }
        }
        a:hover{    
            img:nth-child(2){
                display: block;
                position: absolute;
                z-index: 100;
                top:0;
                left:0;
            }
            span{
                display: block;
                position: absolute;
                text-align:center;
                top: 37%;
                left: 28%;
                z-index:101;
                @include border-radius(5px, 5px);
                @include box-shadow(black 2px 2px 10px);
            }
        }
    }
}

img{
    width:100%;
    max-width: 100%;
    height:auto !important;
}

在鼠标悬停时，第二张图片和一个按钮应该 float 在第一张图片的顶部居中。问题是，如果视口(viewport)发生变化，最新版本将不再起作用，并且按钮不居中。以下关于 CSS 技巧的文章提供了一个很有前途的解决方案:

Centering in the unknown

演示运行良好:

Centering in the unknown demo

但它使用内联 block 元素，这使得难以对图像进行分层并最终在它们之上显示居中按钮 - 当设置 display:inline-block 属性时，元素将依次显示。还有一个问题是，与我的 HTML 相比，演示将子对象与父对象对齐。

有没有办法将提到的技术应用于我的问题，或者是否有更适合的方法？最好的问候拉尔夫

Answer 1

如果我对你的理解是正确的，我想你就快成功了。

<a>需要是 position: relative;

<span>需要是 position: absolute;

关于<span>如果您设置特定宽度，并应用:

width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin-top: -50px /* Half of the height */
margin-left: -50px; /* Half of the width */

http://codepen.io/anon/pen/xjcCf

这是否解决了您想要做的事情？