无法将文字在图片上居中

Question

I have a particular setup that allows 4 images set side by side and to act responsively in a list format.

I am trying to have a caption with a background matching the same height as the text and extending to the width of the image, to be centered vertically and horizontally when hovered.

I have read numerous articles where position absolute/relative is used, but I can't get it working in my code. I tried vertical align, text-center, top, left, width, but the text still remains at the bottom of the image.

Here is about 10% of the links I have clicked on:

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?

I am sorry for the long post (Its's all the code so just skip the code to the jsfiddle).

My currrent setup 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";
            });
    });
});

I would really appreciate some help/guidance on this one please. Thank you in advance.

Incase you missed it: https://jsfiddle.net/74n5qf3q/1/

Answer 1

Here's my fix: https://jsfiddle.net/JustusFT/jrhk8L7j/
I used this technique to center it. https://www.w3.org/Style/Examples/007/center.en.html#hv3

I set the thumbnail's position: to relative. This causes child elements with absolute positioning positioned based on the parent. New 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%);
}

I also removed all instances of text-align:center;