无法在图像悬停时将文本居中答案

【问题标题】：Can not center text on image hover无法在图像悬停时将文本居中
【发布时间】：2014-01-18 15:17:01
【问题描述】：

我正在为我的网站设置一个新主页。它将有一个由四个图像组成的 2x2 网格，这些图像会随着窗口的大小而变化，并且它们都会有一个悬停文本。到目前为止，我能够做所有事情，但我在某一点上卡住了，这可能有一个我找不到的简单答案。当我将鼠标悬停在图像上时，无论窗口大小如何，我都想让文本居中。但我找不到正确的方法来做到这一点。我尝试过的方法要么不在垂直和水平方向居中，要么在我调整窗口大小时文本偏离中心。任何帮助，将不胜感激。谢谢！

这是我的代码：jsfiddle

HTML

<section id="photos">
    <a href="/portfolio/test1.shtml" class="darken"><img src="image1"><span>GALLERY ONE</span></a>
    <a href="/portfolio/test2.shtml" class="darken"><img src="image2"><span>GALLERY TWO</span></a>
    <a href="/portfolio/test3.shtml" class="darken"><img src="image3"><span>GALLERY THREE</span></a>
    <a href="/portfolio/test4.shtml" class="darken"><img src="image4"><span>GALLERT FOUR</span></a>
</section>

CSS

#photos {
/* Prevent vertical gaps */
line-height: 0;
margin-left:150px;

-webkit-column-count: 2;
-webkit-column-gap:   0px;
-moz-column-count:    2;
-moz-column-gap:      0px;
column-count:         2;
column-gap:           0px;
}

#photos img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}

a.darken {
display: inline-block;
background: black;
padding: 0;
position:relative;  
}

a.darken img {
display: block;

-webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
     -o-transition: all 0.2s linear;
        transition: all 0.2s linear;
}

a.darken:hover img {
opacity: 0.3;           
}

a.darken span{visibility:hidden; font-size:16px;}
a.darken:hover span{color:#fff; visibility:visible;
-webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
     -o-transition: all 0.2s linear;
        transition: all 0.2s linear;
}

【问题讨论】：

只是提示，使用 CSS，0anything 将始终为 0。从 0px 中删除 px。

标签： html css image webkit hover

【解决方案1】：

您需要将这些样式添加到<span>：

position: absolute;
top: 50%;
left: 35%;

您可以使用这些值，直到获得所需的位置。这是一个有效的example。

【讨论】：

【解决方案2】：

这在旧版浏览器中不起作用，但您可以结合使用“翻译”和绝对定位来垂直和水平对齐文本。只需添加以下内容：

a.darken span{
  visibility:hidden; 
  font-size:16px;

  /* new styles below: */
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  line-height: 100%;
}

这是一个例子： http://jsfiddle.net/bk2Sd/2/

【讨论】：

【解决方案3】：

由于您的a.darken 选择器已经启用了相对定位，您可以在span 属性上启用绝对定位。

http://jsfiddle.net/EfrainReyes/bk2Sd/4/

a.darken span {
    display: block;
    height: 100%;
    width: 100%;
    visibility:hidden;
    position: absolute;
    top: 50%;
    font-size:16px;
}

我添加了display: block 以及完整的高度和宽度，因此我可以在a.darken 选择器上使用text-align: center。

【讨论】：

【解决方案4】：

我建议一些更通用的东西。

由于图像的大小未知，我们可以使用 text-align 属性将文本水平居中，然后使用绝对定位的元素将其垂直居中，并将 top 设置为 50%。

要添加的代码：

a.darken span {
  width: 100%;
  text-align: center;
  top: 50%;
  left: 0
  position: absolute;
}

http://jsfiddle.net/bk2Sd/5/

【讨论】：