Question

我遇到了问题。我试图用悬停来制作图像。我在div中得到了一些文字。现在我希望文本以div为中心。我用过：

display: table-cell;
vertical-align: middle;

文本几乎在Div的中间。当我向其添加更多文本时，您将看到文本不居中。

直播示例：http://jsfiddle.net/DennisBetman/6TkkE/

我希望你们中的一些人知道这个问题并且可以帮助我。

Answer 1

您让<h1>拥有position:absolute，但没有相对于其定位的容器。

我从position:absolute开始height:100%和<h1>了。然后我将position:relative添加到其容器.text

这是表明这一点的小提琴： http://jsfiddle.net/6TkkE/5/

Answer 2

这是一个很好的解决方法，这对我的目的很好：获得一个你的大小的容器（相对也很好）。使其位置相对，在绝对位置放置一个跨度或p。给它一个行高，可能是30px。取决于您的字体大小。然后以左侧和顶部居中，固定边距，宽度必须为100％才能应用text-align：center。

.container {
    position: relative;
    width: 800px;
    height: 600px;
}
.container > span {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -15px;
    margin-left: -50%;
    line-height: 30px;
    width: 100%;
    text-align: center;
}
...
<div class="container">
    <span>Vertical and Horizontal align.</span>
</div>

对我来说很好！

CSS Text Vertical Align Middle

2 个答案: