如何在响应图片上垂直居中文本？ [英] How can I vertically center text over a responsive image?

问题描述

当浏览器窗口调整大小时，如何获取这些图片上的字幕文字？我的实现是jicky，我需要一个方法，以防止文本在窗口大小调整时滑动。

Codepen

 < div class =row> 
< div class =col-md-6> 
< img src =http://placekitten.com/600/375class =img-responsive/> 
< h2 class =homeImageLink> 
< span>标题文字< / span> 
< / h2> 
< / div> 
< div class =col-md-6> 
< img src =http://placekitten.com/600/375class =img-responsive/> 
< h2 class =homeImageLink> 
< span>标题文字< / span> 
< / h2> 
< / div> 
< / div> 
 
 .homeImageLink {
 position：absolute; 
 top：110px; 
 left：0; 
 text-align：center; 
 width：100％; 
} 
 
 .homeImageLink span {
 color：red; 
 font-weight：300; 
 font-style：italic; 
 text-transform：uppercase; 
 letter-spacing：15px; 
 pointer-event：none; 
} 
  

解决方案

容器，使其位置相对。

  .img-container {
 position：relative; 
} 
  

然后让homeImageLink绝对值并在45％ p>

它将使它垂直居中。

  .homeImageLink {
 position：absolute; 
 top：calc（50％ -  24px）; // 24px是H1的字体大小我假设
 left：0; 
 text-align：center; 
 width：100％; 
} 
  

此处演示： http://codepen.io/anon/pen/bJadE

How can I get the caption text on these images to move around when then the browser window is resized? My implementation is jicky and I need a way to keep the text from sliding around when the window is resized.

Codepen

<div class="row">
  <div class="col-md-6">
    <img src="http://placekitten.com/600/375" class="img-responsive" />
    <h2 class="homeImageLink">
      <span>Caption Text</span>
    </h2>
  </div>
  <div class="col-md-6">
    <img src="http://placekitten.com/600/375" class="img-responsive" />
    <h2 class="homeImageLink">
      <span>Caption Text</span>
    </h2>
  </div>
</div>

.homeImageLink {
   position: absolute; 
   top: 110px; 
   left: 0;
   text-align: center; 
   width: 100%; 
}

.homeImageLink span { 
    color: red;
    font-weight: 300;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 15px;
    pointer-events: none;
}

解决方案

Just add one class to parent container, make it's position relative.

.img-container {
  position:relative;
}

And then make homeImageLink absolute and give top at around 45%..

It will make it vertically centered..

.homeImageLink {
   position: absolute; 
   top: calc(50% - 24px); //24px is font size of H1 I assume 
   left: 0;
   text-align: center; 
   width: 100%; 
}

Demo here : http://codepen.io/anon/pen/bJadE

这篇关于如何在响应图片上垂直居中文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！