0

最近几天，我尝试将按钮置于流畅图像的中心。到目前为止，位置是固定的和静态的。相关的 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 技巧的文章有一个很有前途的解决方案：

以未知为中心

该演示工作正常：

以未知演示为中心

但是它使用了 inline-block 元素，这使得很难对图像进行分层并最终在其顶部显示一个居中的按钮 - 当设置 display:inline-block 属性时，这些元素会一个接一个地显示。还有一个问题，与我的 HTML 相比，演示将子对象与父对象对齐。

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

4

2 回答 2

2

如果我理解正确，我想你就快到了。

<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

这能解决你想要做的事情吗？

于 2013-03-12T01:08:29.183 回答
0

嗨，这是什么样子

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

工作演示

注意：滚动小提琴，这样你就可以看到效果

于 2013-03-12T02:13:32.157 回答