水平&在HTML图像上的垂直居中文本（绝对定位） [英] Horizontally & Vertically Center Text OVER an HTML Image (Absolute Positioning)

问题描述

给出以下设计元素，我试图在HTML中包含图像，以便不透明度可以通过CSS转换（悬停效果）进行操作。

这里是我的解决方案到目前为止：

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

解决方案

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

这篇关于水平&在HTML图像上的垂直居中文本（绝对定位）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！