Question

晚上好，

我有这个博客：http://bloganacastro.com/我在徽标下面有一些最后的帖子。它差不多完成了。我无法弄清楚如何将文本准确地置于中间，无论其中有多少个字符。例如，这个博客：sempreglamour.com.br完全按照我的意愿工作。我已经尝试从这个博客中复制一些CSS，但也没有工作。

编辑：

打印屏幕与这两个博客http://imageshack.com/a/img661/7620/kr6Ov7.png

的区别

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

Answer 1

如果您正在谈论水平居中文本，那么应该这样做：

.class {
    text-align: center;
}

Answer 2

我通过在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内完全展开，然后可以轻松实现居中。

div img悬停标题

2 个答案: