CSS文本垂直对齐中间

我遇到了问题。我试图用悬停来制作图片。我在div里有一些文字。现在我想要文本以div为中心。我用过：CSS文本垂直对齐中间

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

文字几乎在Div中间。当我添加更多文本时，您会看到文本不居中。

活生生的例子：http://jsfiddle.net/DennisBetman/6TkkE/

我希望你们中的一些认识问题，并能帮助我。

来源

2013-05-29 Dennis Betman

你让你的<h1>有一个position:absolute，但没有它被定位的容器。

我把position:absolute和height:100%关闭了<h1>。然后我加入position:relative到其容器.text

这里是显示这个小提琴： http://jsfiddle.net/6TkkE/5/

来源

2013-05-29 17:59:46 ntgCleaner

没问题;）.. – ntgCleaner

以下是此一个很好的解决办法，它工作得很好我的目的：让你的尺寸的容器中（相对是好的太）。使其位置相对，在绝对位置放置一个跨度或p。给它一个行高，也许30px。取决于你的字体大小。然后将它居中放置左边和上边，固定边距，宽度必须为100％才能应用文本对齐：居中。

.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>

对我来说工作很好！

来源

2014-06-26 11:01:24 AmazingTurtle

CSS文本垂直对齐中间

回答

相关问题