在流體圖像上保持按鈕居中

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; 
} 

在鼠標懸停的第二圖像，以及一個按鈕應該在第一圖像的頂部浮球中心。問題是如果視口更改最近的版本不再工作，並且按鈕不居中。在CSS-技巧下面的文章有前途的解決方案：

Centering in the unknown

演示工作得很好：

Centering in the unknown demo

但它採用inline-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

這是否解決你在做什麼？

Answer 2

嗨，是什麼樣子

HTML

<div> 
    <h1><span>button</span></h1> 
    <img src="imageSample.jpg" alt="" />  
</div> 

CSS

div { 
    position:relative; 
    width:100%; 
} 
div img { 
    max-width:100%; 
    width:100%; 
} 
div h1 { 
    width:100px; 
    margin:auto; 
} 
div h1 span { 
    position:absolute; 
    z-index:999; 
    top:200px; 
    padding:5px; 
    background-color:#fff; 
} 

工作demo

注：滾動小提琴，所以你可以看到效果