CODEWITHSUNDEEP
htmlcssflexbox
Michael Roach
Michael Roach

Reputation: 168

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

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?

County Badges

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

Upvotes: 0

Views: 6814

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105933

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

Upvotes: 2

Narek-T
Narek-T

Reputation: 1928

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

Upvotes: 11

Related Questions