How can I vertically center text over a responsive image?

Question

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

Have you tried using a col-md-offset-4 col-md-4 class on the span? — JanR, May 21 '14 at 03:54
@JanR No, I haven't - how would I handle the vertical centering with that too? — drewwyatt, May 21 '14 at 03:56
Yeah scratch that, it won't work, I just realised what you are trying to do and it will not work for overlaying the text — JanR, May 21 '14 at 03:56
Posted an answer, not sure if that's what you are after tho :) Are you talking vertical or horizontal alignment? This works for the horizontal alignment, the other answers show the vertical alignment — JanR, May 21 '14 at 04:03

Rahul Patil · Accepted Answer · 2016-04-11T04:33:35.230

17

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

edited Apr 11 '16 at 04:33

answered May 21 '14 at 04:01

Rahul Patil

5,656
6
37
65

Why top:45% and not 50? – Shawn Taylor May 21 '14 at 07:25
Just because text height takes little bit of height. – Rahul Patil May 21 '14 at 10:02
thank you, and you can also add `line-height` as mentioned [here](http://stackoverflow.com/questions/17415994/how-to-create-responsive-text-on-top-of-an-image), i was trying to create responsive html email with text overlay in image – Shaiju T Apr 22 '15 at 05:46
1

Instead of using top: 45%, use top: calc(50% - [font-size of text]) – ericgrosse Apr 09 '16 at 14:03
2

Better method is now to use `top: 50%; transform: translateY(-50%);`. No need to track the line height – myol Mar 30 '18 at 03:30
This is a great answer. For perfectionists who want perfectly centered text, use `top: calc(50% - ([total height] / 2))`, where `[total height]` is line height + top & bottom padding + top & bottom margin. – Craig Brown Apr 21 '18 at 17:49

score 0 · Answer 2 · answered Feb 02 '17 at 15:38

I came up with another solution, here's a working demo:

http://codepen.io/niente0/pen/jyzdRp

HTML:

<DIV class=wrapper>
     <DIV class=divimage></DIV>
     <DIV class=divtext>THIS IS A TEST</DIV>
</DIV>

CSS:

HTML,BODY {
  max-width:1200px;
}
.wrapper {
  position:relative;
  width:100%;
  max-width:1200px;
  height:100%;
  min-height:320px
}
.divimage {  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:url(https://thumbs.dreamstime.com/t/empty-red-banner-corners-ropes-textile-white-background-d-illustration-70434974.jpg);
  background-repeat:no-repeat;
  background-size:100% auto;
}
.divtext {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  padding-top:13.5%;  
  text-align:center;
  font-weight:bold;
  font-size:5vw;
  color:white;
  font-family:arial;
}
@media (min-width: 1200px) {
  .divtext{
    font-size:60px;
  }
}

How can I vertically center text over a responsive image?

2 Answers2

Linked