分隔悬停标题中的文本居中

Question

晚上好

我有这个博客:http://bloganacastro.com/在那里我有一些最后的标志下面的帖子。差不多完成了。我就是不知道怎么让文字正好居中，不管里面有多少个字符。例如，这个博客:sempreglamour.com.br完全符合我的要求。我已经试过从这个博客复制一些CSS，但不会工作太。

编辑:

打印两个博客的不同之处http://imageshack.com/a/img661/7620/kr6Ov7.png

正如你所看到的，从右边的图像都有完美的填充/边距，无论文本的大小，它总是完全填充。在左边的例子中，根据文本的大小，它不会填充，而且从来没有真正集中。

Answer 1

我通过在<h3>上添加position: absolute来解决您的问题，所以请尝试一下。

.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中充分扩展，然后就可以很容易地居中了。

Answer 2

如果你想让文字水平居中，可以这样做:

.class {
    text-align: center;
}