无法在图像上居中文本

Question

我有一个特殊的设置，允许并排设置 4 个图像并以列表格式响应。

我正在尝试使用与文本高度匹配并延伸到图像宽度的背景的标题，以便在悬停时垂直和水平居中。

我已经阅读了许多使用绝对/相对位置的文章，但我无法让它在我的代码中工作。我尝试了垂直对齐、文本居中、顶部、左侧、宽度，但文本仍然保留在图像的底部。

这是我点击过的大约 10% 的链接：

1. Horizontal centering text over image via CSS
2. Responsive image with text overlay
3. Centering things
4. Text over image without absolute position
5. How to put text over an image without absolute positioning or setting the image as backbround
6. Why can't an <ul> (with absolute position) inside a <li> (with relative position) auto size?
7. HTML: center image caption relative to image?

很抱歉这篇长文（这是所有代码，所以只需将代码跳过到 jsfiddle）。

我当前的设置Here is a link to the jsFiddle:

HTML：

<ul class="tab">
    <li>
        <a class="tabimg gq-module-hover tilt" tabindex="0" data-about="Newborns"><img src="http://debora.com.au/wp-content/uploads/2016/11/DEB_0095.jpg" alt="">Newborns</a>
    </li>
    <li>
        <a class="tabimg gq-module-hover" tabindex="1" data-about="Children"><img src="http://debora.com.au/wp-content/uploads/2016/11/DEB_8252.jpg" alt="">Children</a>
    </li>
    <li>
        <a class="tabimg gq-module-hover" tabindex="2" data-about="Families"><img src="http://debora.com.au/wp-content/uploads/2016/11/DEB_8607.jpg" alt="">Families</a>
    </li>
    <li>
        <a class="tabimg gq-module-hover" tabindex="3" data-about="Lifestyle"><img src="http://debora.com.au/wp-content/uploads/2016/11/DEB_6620.jpg" alt="">Lifestyle</a>
    </li>
</ul>

CSS：

/* Style the list */
ul.tab {
  whitespace: nowrap;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
}

/* Style the a tags */
ul.tab li a {
  display: inline-block;
  color: black;
  text-align: center;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
  -webkit-filter: grayscale(50%); /* Safari 6.0 - 9.0 */
  filter: grayscale(50%);
}

/* Change background color of links on hover */
ul.tab li a:hover {
  background-color: #000000;
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
  box-shadow: 1px 5px 14px rgba(0, 0, 0, 3);
  z-index: 1;
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
}


/* Create an active/current tablink class */
ul.tab li a:focus, .active {
  background-color: #ccc;
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
}


/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}


/*style the images*/
.tabimg {
  box-sizing: border-box;
}

.tab {
  font-size: 0; /* To get rid of the space below the li tags */
  display: inline-block;
  /* change this to display: block; in order to make the container as wide as the page is */
  box-sizing: border-box;
  overflow: hidden;
  /* to clear the float */
}

.tab li {
  box-sizing: border-box;
  float: left;
  width: 25%;
}

.tab li a {
  width: 100%; /* remove this if you dont want the images to resize if the container is as wide as the page (if .tab is display: block;*) */
}

.tab li img {
  width: 100%;
  display: block;
  box-sizing: border-box;
}

Javascript

    /* Simple foreach as the js foreach method is not supported by IE9 and you may want to support it.
CanIUse: http://caniuse.com/#search=foreach */
function simpleForEach(array, callback) {
    for (var i = 0; i < array.length; i++) {
            callback(array[i], i);
    }
}

/* Parts of this can be done with pure css.
This function should executed on load:
    document.addEventListener("load", load);
or on DOMContentLoaded:
    document.addEventListener("DOMContentLoaded", load);
CanIUse: http://caniuse.com/#search=DOMContentLoaded. */

jQuery(document).ready(function(){
    var tabimgs = document.getElementsByClassName("tabimg");

    // for each tabimg
    simpleForEach(tabimgs, function(tabimg) {
            var cityName = tabimg.getAttribute("data-about");

            // add the click event listener
            tabimg.addEventListener("click", function(evt) {
                // onclick do:

                // hide all tabcontents
                simpleForEach(document.getElementsByClassName("tabcontent"), function(tc) {
                    tc.style.display = "none";
                });

                // remove the active class
                simpleForEach(document.getElementsByClassName("tabimg"), function(ti) {
                    ti.className = ti.className.replace(" active", "");
                });

                // show the current tab, and add "active" class to the link that opened the tab
                document.getElementById(cityName);
                tabimg.className += " active";
            });
    });
});

我非常感谢您对此提供一些帮助/指导。提前谢谢你。

如果你错过了：https://jsfiddle.net/74n5qf3q/1/

Answer 1

这是我的解决方法：https://jsfiddle.net/JustusFT/jrhk8L7j/
我使用这种技术来居中。 https://www.w3.org/Style/Examples/007/center.en.html#hv3

我将缩略图的position: 设置为相对。这会导致具有absolute 定位的子元素基于父元素定位。 新 HTML：

<ul class="tab">
  <li>
    <a class="tabimg gq-module-hover tilt" tabindex="0" data-about="Newborns">
      <img src="http://debora.com.au/wp-content/uploads/2016/11/DEB_0095.jpg" alt="">
      <div class="caption">Newborns</div>
    </a>
  </li>
  <li>
    <a class="tabimg gq-module-hover" tabindex="1" data-about="Children"><img src="http://debora.com.au/wp-content/uploads/2016/11/DEB_8252.jpg" alt="">
      <div class="caption">Children</div>
    </a>
  </li>
  <li>
    <a class="tabimg gq-module-hover" tabindex="2" data-about="Families"><img src="http://debora.com.au/wp-content/uploads/2016/11/DEB_8607.jpg" alt="">
      <div class="caption">Families</div>
    </a>
  </li>
  <li>
    <a class="tabimg gq-module-hover" tabindex="3" data-about="Lifestyle"><img src="http://debora.com.au/wp-content/uploads/2016/11/DEB_6620.jpg" alt="">
      <div class="caption">Lifestyle</div>
    </a>
  </li>
</ul>

CSS：

.tab li {
  box-sizing: border-box;
  float: left;
  width: 25%;
  position: relative;
  /*Added*/
}
.tab li .caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

我还删除了text-align:center; 的所有实例