8

I'm looking to center text both vertically and horizontally over an image that grows when the page gets wider.

I originally had the image set as the background for a div of fixed height, in which case it was relatively easy to center it, but because background images aren't structural, I couldn't set the height to be an automatic function of the width, and I had to toss this option out when I went for a more responsive design.

So I've currently got a div with two elements in it, img and overlay text. The image width is set to 100% of the width of its container, and the height varies accordingly. As a consequence, though, I can't set the overlay text to be postion:absolute and top:80px or something, because the distance from the top will have to vary. And even doing top:25% or whatever doesn't work, because a) if that page width shrinks to squeeze the text, or if there's just more text, the vertical centering is thrown off when there are more/less lines, and b) the percentage is arbitrary -- it's not 50 or something, because that would put the top of the text overlay 50% down the image, when I want the center of the overlay to be there.

I've looked, among other things, at this post, which is definitely close -- but in both solutions, the image height is incapable of resizing, and in the former, the JS loads at page load, but then freezes, so that if I change page width/height, things get out of whack. Ideally, this solution wouldn't involve JS for just that reason (even if it reloaded on every resize, that feels non-ideal), but if that's the only solution, I'll take it.

Also, just for added details/fun, I've set a max-height on the image, because I don't want it to exceed roughly 300px height, even on a cinema display.

Basic fiddle of current attempt here, and identical code below. Any ideas? Thanks!

html

<div class='quotation_div'>
  <img src='http://www.mountainprofessor.com/images/mount-ranier-mount-features-2.jpg'>
  <div class='overlay'>
      <p>Any reasonable amount of text should be able to go here. I want it to be able to center vertically even if it takes up 2 or 3 lines.</p>
  </div>
</div>

css

.quotation_div {
position: relative;
display: table;
}
img {
   width: 100%;
   max-height: 300px;
}
.overlay {
    z-index: 99;
    width: 70%;
    margin-left: 15%;
    vertical-align: middle;
    position: absolute;
    top: 25%; /* Obvious problem, cause it's arbitrary */
}
p {
    text-align: center;
    color: red;
    font-size: 165%;
    font-weight: lighter;
    line-height: 2;
}
Community
  • 1
  • 1
Sasha
  • 6,224
  • 10
  • 55
  • 102
  • Possible duplicate http://stackoverflow.com/questions/59309/how-to-vertically-center-content-with-variable-height-within-a-div – user1477388 Jul 23 '13 at 19:16
  • Possible duplicate http://stackoverflow.com/questions/14113676/vertically-center-a-div-with-variable-height-within-a-div-that-is-100-of-the-vi – user1477388 Jul 23 '13 at 19:17
  • Another solution here: http://stackoverflow.com/questions/21562253/vertical-centering-some-text-over-an-image-with-dynamic-height/21562992#21562992 – Hashem Qolami Feb 04 '14 at 22:03

4 Answers4

6

You can use CSS background-size to set the width to 100% and the height will be calculated to maintain aspect ratio.

Here's a fiddle using that technique.

If you want the image as an HTML element then I suggest you set it's position to absolute and use the same method of disply:table-cell to center the overlay:

Here's a fiddle using that method, this one stretches the image because of the max-height.

omma2289
  • 54,161
  • 8
  • 64
  • 68
  • Awesome. I ended up taking the advice of the first option, going with background image. Two caveats: I also had to set the width of the background div to 100%, because the image was less wide in pixels than the window width, for my big display. Additionally, I think this only worked in my case (with lots of stacking content), when the inner overlay text had vertical margins to give the container definite vertical height. At any rate, it works great. Thanks! – Sasha Jul 23 '13 at 20:51
1

Please Try the below css for .overlay as in your fiddle

.overlay {
    z-index: 99;
    width: 70%;
    /* height: 100%; */
    /* margin-left: 15%; */
    /* vertical-align: middle; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

or this is the updated fiddle link http://jsfiddle.net/hLdbZ/284/

Arun Redhu
  • 1,584
  • 12
  • 16
0

I use this combination:

.CONTAINER {
  position: relative;
  text-align: center;
}

.TEXT {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
}

.IMG {
  //for responsive image
  width: 100%;
  height: auto;
}
kyun
  • 9,710
  • 9
  • 31
  • 66
Mario Team
  • 1
-1

I just added to the html

<div align="center"></div>

to surround your existing code to get the image to center

hope that helps

Pete
  • 1