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

マウスオーバーすると、2番目の画像とボタンが最初の画像の中央に表示されます。問題は、ビューポートが変更された場合、最近のバージョンが機能しなくなり、ボタンが中央に配置されないことです。CSSトリックに関する次の記事には、有望な解決策がありました。

未知を中心に

デモは正常に機能しました。

未知のデモを中心に

ただし、インラインブロック要素を使用しているため、画像を重ねて、その上に中央のボタンを最後に表示することは困難です。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 に答える