レスポンシブルデザイン：画像上にフロートテキスト

Question

私はまだこれに対する答えを見つけていません。私は成長するイメージを持つdivを持っています：ホバー。私は、ホバーの間に静的なテキストをオーバーレイし、アンカータグに干渉しないようにしたい。私はまた、このデザインが反応して、テキストが常にイメージの真ん中にあるようにする必要があります。私はDisplay：TableとTable-cellを試しました...私が試したすべてに同意しないCSSの部分があります。

私はAbsolute divの内部にテキストを置くことができましたが、これは反応しないので、テキストの正確なピクセル位置を指定したくありません。

<style> 
#AOB{ 
height: 700px; 
position: relative; 
padding: 30px 200px 0px; 
} 


.innerBlock { 
float: left; 
display:block; 
position: relative; 
} 

#AOB .innerBlock { 
width: 33.2%; 
height: 50%; 
overflow:hidden; 
} 

#AOB img{ 
height:100%; 
width: 100%; 

} 

#AOB img:hover{ 
-webkit-transform:scale(1.05); 
-ms-transform:scale(1.05); 
transform:scale(1.05); 
transition: all 0.2s ease; 
} 


.innerBlockText{ 
position:absolute; 
top: 100px; 
left: 100px; 
z-index:1; 
} 



</style> 

<div id="AOB"> 
    <div id="one" class="innerBlock"> 
    <a href = "http://www.google.com"> 
    <div class="innerBlockText"> 
    beach 
    </div> 
    <img src="https://www.weebly.com/editor/uploads/2/1/6/7/21673280/custom_themes/537557073923231080/files/images/beach.png"> 
    </a> 
    </div> 

    <div id="two" class="innerBlock"> 
    <a href = "http://www.google.com"> 
    <img src="https://www.weebly.com/editor/uploads/2/1/6/7/21673280/custom_themes/537557073923231080/files/images/beach.png"> 
    </a> 
    </div> 

    <div id="three" class="innerBlock"> 
    <a href = "http://www.google.com"> 
    <img src="https://www.weebly.com/editor/uploads/2/1/6/7/21673280/custom_themes/537557073923231080/files/images/beach.png"> 
    </a> 
    </div> 

    <div id="four" class="innerBlock"> 
    <a href = "http://www.google.com"> 
    <img src="https://www.weebly.com/editor/uploads/2/1/6/7/21673280/custom_themes/537557073923231080/files/images/beach.png"> 
    </a> 
    </div> 

    <div id="five" class="innerBlock"> 
    <a href = "http://www.google.com"> 
    <img src="https://www.weebly.com/editor/uploads/2/1/6/7/21673280/custom_themes/537557073923231080/files/images/beach.png"> 
    </a> 
    </div> 

    <div id="six" class="innerBlock"> 
    <a href = "http://www.google.com"> 
    <img src="https://www.weebly.com/editor/uploads/2/1/6/7/21673280/custom_themes/537557073923231080/files/images/beach.png"> 
    </a> 
    </div> 



</div> 

ありがとうございます。

Answer 1

は（もちろん、現在のセレクタの内側にそれを置く）

.innerBlockText { 
    top: 50%; 
    transform: translate(-50%, -50%); 
    left: 50%; 
} 

を追加します。上/左50％は、それを親に関してそれらの位置に移動させる。翻訳はそれを中心にそれを動かします。

https://jsfiddle.net/9Lvmjt5g/4/