响应式设计：在图像上浮动文本答案

【问题标题】：Responsive design: Float text over image响应式设计：在图像上浮动文本
【发布时间】：2017-08-09 01:15:46
【问题描述】：

我还没有找到答案。我有一个 div 的图像随着 :hover 的增长而增长。我想覆盖一些在悬停期间是静态的并且不会干扰锚标记的文本。我还需要这种设计具有响应性，以便文本始终位于图像的中间。我已经尝试过 Display:Table 和 Table-cell...我的 CSS 的某些部分与我尝试的所有内容都不一致。

我已经能够将文本放在绝对 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>

谢谢。

【问题讨论】：

标签： html css hover responsive floating

【解决方案1】：

添加

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

（当然，把它放在你当前的选择器中）。顶部/左侧 50% m将其移动到与父级相关的位置； translate 相对于自身移动它，使其居中。

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

【讨论】：