Question

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

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

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

以下是我点击的链接的大约10％：

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

我很抱歉这篇长篇文章（它的所有代码都只是跳过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;

的所有实例

无法将图像居中放在图像上

1 个答案: