考虑到响应性，如何将文本居中放置在图像上方？

Question

文本已经在图像的顶部，但是当您调整页面大小时，图像的大小会改变。 如何让文本将其中心调整到图像的高度？

这就是我得到的

的HTML

<section id="eyeCatcher">
   <div id="catchContainer" >
       <div id="eyeCatchQuote">
        <h1>text</h1>
       </div>

       <span id="eyeCatchPhoto" role="img" >
           <span class="inner">
           </span>
       </span>
   </div>
</section>

的CSS

#eyeCatcher{
   max-width: 1366px; 
   margin: 0 auto; 
}

#catchContainer {
   max-width: 1366px; 
}

#catchContainer #eyeCatchPhoto {
   width: 100%;
   display: inline-block;
   vertical-align: middle;
   font: 0/0 serif;
   text-shadow: none;
   color: transparent;
   background-size: 100%;
   background-position: 50% 50%;
   background-repeat: no-repeat;
}

#catchContainer #eyeCatchPhoto .inner{
   padding-top: 60%;
   display: block; 
   height: 0; 
}

#catchContainer #eyeCatchPhoto{
   background-image: url("../img/overview.jpeg");
}

#eyeCatchQuote{
   margin-top: -26px; 
   position: relative; 
   top: 300px; 
}

这就是它的样子

大

调整为小尺寸

Answer 1

您可以使用实际图像来代替跨度和背景图像，而可以使用绝对定位来使文本​​居中。

HTML：

<section id="eyeCatcher">
 <div id="catchContainer">
    <div id="eyeCatchQuote">
      <h1>TEXT ELEMENT</h1>
    </div>
    <img src="YOURIMage" id="eyeCatchPhoto" role="img">
  </div>
</section>

CSS：

#eyeCatcher {
  max-width: 1366px;
  margin: 0 auto;
}
#catchContainer {
  max-width: 1366px;
  position: relative;
}
#catchContainer #eyeCatchPhoto {
 width:100%;
}
#eyeCatchQuote {
 position: absolute;
 top: 50%;
 left:50%;
 margin:0;
 transform:translateX(-50%)translateY(-50%);
}

这是一个小提琴