Horizontally & Vertically Center Text OVER an HTML Image (Absolute Positioning)

Question

Given the following design element, I'm attempting to include the images in html so that the opacity can be manipulated with css transitions (hover effect).

Here's my solution thus far: http://codepen.io/roachdesign/pen/VeQKJK/

The major drawback here is that I'm using a manual vertical centering (absolute / top:40%), which becomes apparent when shrinking the browser.

Is is possible to apply vertical centering with flexbox or tables when working with absolute positioning?

HTML

<div class="badge-container">
  <a href="">
    <div class="badge">
        <img src="http://www.placehold.it/400x400/FF9999">
        <h2><strong>Cumberland</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
        <img src="http://www.placehold.it/400x400/99FF99">
        <h2><strong>Dauphin</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
        <img src="http://www.placehold.it/400x400/9999FF">
        <h2><strong>Lancaster</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
        <img src="http://www.placehold.it/400x400/9F9F99">
        <h2><strong>Lebanon</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
        <img src="http://www.placehold.it/400x400">
        <h2><strong>York</strong>County</h2>
    </div>
  </a>
</div>

SCSS

.badge-container {display:flex; flex-direction:row; 
  .badge {position:relative;}
  h2 {position:absolute;
      top:36%;
      left:0; 
      right:0;
      text-align:center;
      strong {display:block;}
  }
}

img {max-width:100%;}

I'd suggest taking a look at [this answer here](http://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block/25799339#25799339). It covers multiple different approaches for vertically/horizontally centering text. — Josh Crozier, Jan 22 '16 at 20:57
For text over images try this solution: http://geekgirllife.com/place-text-over-images-on-hover-without-javascript/ — Martin, Jan 22 '16 at 20:58
@JoshCrozier I tried every one BUT the margin/translate approach, and of course it was #1 on the list lol — Michael Roach, Jan 22 '16 at 21:18

Narek-T · Accepted Answer · 2016-01-22T21:04:13.943

11

You can use transforms

h2 {
  position:absolute;
  top:50%;
  left:50%; 
  text-align:center;
  transform: translateX(-50%) translateY(-50%);
}

And don't forget to clear margins of h2 Here is a working demo

edited Jan 22 '16 at 21:04

answered Jan 22 '16 at 21:00

Narek-T

1,898
10
20

op SHOULD use transforms ! Unless IE8 has to be supported. – Antoine Combes Jan 22 '16 at 21:03
1

@Hritik Because of you write code in SCSS, but in codepen you choose syntax CSS. Switch to SCSS and it will work. – Narek-T Sep 22 '17 at 17:48

score 2 · Answer 2 · answered Jan 22 '16 at 21:40

you could keep using flex for h2 too

.badge-container,
h2 {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.badge-container .badge {
  position: relative;
}
.badge h2 {
  margin: 0;
  position: absolute;
  justify-content: center;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  flex-direction:column;
}
.badge-container h2 strong {} img {
  max-width: 100%;
}

<div class="badge-container">
  <a href="">
    <div class="badge">
      <img src="http://www.placehold.it/400x400/FF9999">
      <h2><strong>Cumberland</strong>County</h2>
    </div>
  </a>

  <a href="">
    <div class="badge">
      <img src="http://www.placehold.it/400x400/99FF99">
      <h2><strong>Dauphin</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
      <img src="http://www.placehold.it/400x400/9999FF">
      <h2><strong>Lancaster</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
      <img src="http://www.placehold.it/400x400/9F9F99">
      <h2><strong>Lebanon</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
      <img src="http://www.placehold.it/400x400">
      <h2><strong>York</strong>County</h2>
    </div>
  </a>
</div>

http://codepen.io/anon/pen/BjYQvv

Horizontally & Vertically Center Text OVER an HTML Image (Absolute Positioning)

2 Answers2

Linked