css - 在 div img 悬停标题中居中文本

Question

晚上好

我有这个博客:http://bloganacastro.com/我在 Logo 下方有一些最后的帖子。快完成了。无论其中有多少个字符，我都不知道如何将文本准确地居中。例如，这个博客:sempreglamour.com.br 完全符合我的要求。我已经尝试从该博客复制一些 CSS，但也行不通。

编辑:

Print Screen 这两个博客的区别http://imageshack.com/a/img661/7620/kr6Ov7.png

如您所见，右边的图像具有完全完美的填充/边距，无论文本大小如何，它总是完全填充。在左侧的示例中，根据文本的大小，它不会填充并且从未真正集中。

Answer 1

我通过添加 position: absolute 解决了你的问题在 <h3> 上, 所以试试吧。

.caption-text h3 {
    position: absolute;
}

更新:

.caption {
    width: 100%;
    height: 100%;
}
.caption-text h3 {
    margin-top: 0;
    margin-left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}
.caption-text a {
    position: absolute;
    display: block;
    top: 50%;
    transform: translateY(-50%);
}

最后删除现有的 padding你申请了.caption-text h3

现在我要告诉你，垂直居中的文本主要设置在.caption-text a上。 , 你会看到 transfrom和 top ，那些做垂直居中。现在无论文本的长度如何，它都会居中。 width和 height在其他元素上是必要的，以便它们在 li 内完全扩展然后就可以很容易地进行居中。