javascript - 无法将文字居中放置在图片上

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: 设置为 relative。这会导致具有 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; 的所有实例