Css 在div img悬停标题中居中显示文本

晚上好,

我有一个博客：在这里我有一些最后的帖子。差不多完成了。我就是不知道如何把中间的文字准确地排列在中间，不管里面有多少个字符。例如，这个博客：sempreglamour.com.br完全符合我的要求。我已经试着从这个博客上复制一些CSS，但也不起作用

编辑：

打印屏幕上关于这两个博客的差异

---

正如您所看到的，右边的图像具有完全完美的填充/边距，并且无论文本大小，它总是完全填充。在左边的示例中，根据它没有填充的文本的大小，它从来没有真正集中过。

如果您说的是水平居中文本，那么应该这样做：

.class {
    text-align: center;
}

---

我通过在

上添加

位置：绝对

解决了您的问题，所以请尝试一下

.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%);
}

最后一件事是删除已应用于

的现有
填充

现在我要告诉你们，垂直对齐中间文本的主要方法是设置在
上。标题文本a
，你们会看到
从
到
的转换和
顶部的转换，它们是垂直居中的。现在不管文本的长度如何，它都会在中间。其他元素上的
width
和
height
是必要的，这样它们就可以在
li
内部完全展开，然后很容易居中。
基于可读性，使用对正文本是一个非常糟糕的主意，因为连字符没有得到广泛的支持。也许你可以展示你指的是哪一部分的截图？@ChrisBurton我将使用printscreen编辑我的问题。请稍等谢谢你，抱歉耽搁了！已尝试在所有类或/和分区中设置中心。我会在这个问题上加一个屏幕。嗨，罗希特！非常感谢您的回复。差不多完成了，这个把戏对字母起了作用。如果您对此没有问题，可以解释此设置的作用？现在，字母还可以，但所有的短语仍然没有在框架中居中。我尝试了一些CSS，比如边距和填充，我可以居中，但这取决于它不能正常工作的字符数。实际上，你有很多嵌套的
div
和
li
和
a
，这些都让我感到困惑，很难用我的代码检查器live编辑，如果您可以通过在JSFIDLE上复制代码片段来产生问题，那就更好了。net@RodrigoSchneiderWernke你可以在谷歌上搜索
位置
属性，顺便说一句，我已经完全解决了你的问题，请查看我的最新答案。老兄，非常感谢！我终于得到了这个！我会用谷歌搜索你为理解它所做的一切。谢谢