javascript - 如何将图像叠加层中的文本垂直居中

Question

我正在尝试重新创建 google 图像行布局，因为我找不到任何可以帮助我的库。无论您添加多少图像或大小，该行都会自动调整。除了“悬停文本”的垂直对齐方式外，我非常接近。我想把它放在图像的中心。我读到这可以通过行高来完成，但是当您使用较长的文本时，这将无法正常工作。

这是我的代码 jsFiddle

<div class="image-row">
  <a href="#1" class="wrapper">
      <span class="text">Hover text</span>
      <img src="https://source.unsplash.com/random/768x960" width="768" height="960"/>
  </a>
  <a href="#2" class="wrapper">
      <span class="text">Hover text</span>
      <img src="https://source.unsplash.com/random/1280x851" width="1280" height="851"/>
  </a>
    <a href="#2" class="wrapper">
      <span class="text">Hover text</span>
      <img src="https://source.unsplash.com/random/1600x1600" width="1600" height="1600"/>
  </a>
</div>

function picRow(selector) {

            masterArray = [];

            // create each lineArray and push it to masterArray 
            $(selector).each(function () {

                // get "selector" css px value for margin-bottom 
                // - parse out a floating point number 
                // - and divide by the outer width to get a decimal percentage
                margin = (parseFloat($(this).css("margin-bottom"), 10)) / ($(this).outerWidth());
                marginRight = margin * 100 + "%";
                // subtract subtract the total child margin from the total width to find the usable width
                usableWidth = (1 - ((($(this).find("img").length) - 1) * margin));

                // for each child img of "selector" - add a width/height as value in the ratios array
                ratios = [];
                $(this).find("img").each(function () {
                    ratios.push(($(this).attr('width')) / ($(this).attr('height')));
                });

                // sum all the ratios for later divison
                ratioSum = 0;
                $.each(ratios, function () {
                    ratioSum += parseFloat(this) || 0;
                });

                lineArray = [];
                $.each(ratios, function (i) {
                    obj = {
                        // divide each item in the ratios array by the total array
                        // as set that as the css width in percentage
                        width: ((ratios[i] / ratioSum) * usableWidth) * 100 + "%",
                        height: ((ratios[i] / ratioSum) * usableWidth) * 100 + "%",
                        // set the margin-right equal to the parent margin-bottom
                        marginRight: marginRight
                    };
                    lineArray.push(obj);
                });
                lineArray[lineArray.length - 1].marginRight = "0%";
                // alert(lineArray[lineArray.length - 1].marginRight);
                masterArray.push(lineArray);
            });

            $(selector).each(function (i) {

                $(this).find("img").each(function (x) {
                    $(this).css({
                        "width": masterArray[i][x].width,
                        "margin-right": masterArray[i][x].marginRight
                    });

                });
                $(this).find(".text").each(function (x) {
                                var imgHeight = $(this).parent().find("img").height();
                                //console.log(imgHeight)
                    $(this).css({
                        "width": masterArray[i][x].width,
                        "height": imgHeight,
                        "margin-right": masterArray[i][x].marginRight                        
                    });
                });
            });

        }

        $(document).ready(function () {
            picRow(".image-row");
        });
        $( window ).resize(function() {
            picRow(".image-row");
        });

html, body {
  height: 100%;
}

.image-row {
  width: 100%;
  margin: 1% 0;
}
.image-row img {
  width: 100%;
  height: auto;
  display: block;
  font-size: 0;
  float: left;
}
.image-row::after {
  content: "";
  display: table;
  clear: both;
}

*{
    box-sizing: border-box;
}

.wrapper {
    position: relative;
    padding: 0;
    /*width:100px;*/
    display:block;
}
.text {
    position: absolute;
    top: 50%;
    /*line-height: 441px;*/
    color:#9CBDBE;
    font-weight:bold;
    font-size:100%;
    background-color:#fff;
    width: 100px;
    text-align: center;
    padding: 1%;
    z-index: 10;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.text:hover {
    opacity:0.8;
}

img {
    z-index:1;
}

人们告诉我这在没有 jQuery 和只使用 CSS 的情况下是可能的，但后来我失去了所有的响应能力..

Answer 1

您可以将以下代码添加到您的 css 中的 .text 类:

.text { 
position: absolute; 
top: 50%; 
line-height: 150px; 
color:#9CBDBE; 
font-weight:bold; 
font-size:17px; 
background-color:#fff; 
width: 100px; 
text-align: center; 
padding: 1%; 
z-index: 10; 
opacity: 0; 
-webkit-transition: all 0.5s ease; 
-moz-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; 
transition: all 0.5s ease; 
}

这是 jsfiddle https://jsfiddle.net/jfgnta38/1/

另外，如果可以的话，你应该学习 flexbox，这是一个非常有用的“工具”，可以将你的元素放在你想要的地方。