Question

我正在为我的网站设置一个新的主页。它将有一个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;
}

Answer 1

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

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/

Answer 2

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

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

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

Answer 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和完整的高度和宽度，因此我可以在text-align: center选择器上使用a.darken。

Answer 4

我提出了一些更通用的东西。

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

要添加的代码：

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

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

无法将文本居中放在图像悬停上

4 个答案: