将 div 内未知长度的文本垂直居中

Question

我想将未知长度的文本（好吧，它限制在一定的大小，但我不知道它是否需要一行或两行）在div内居中。因此我无法使用line-height。我尝试使用 display: table-cell，但布局被破坏了。我无法对 top 使用一些技巧，因为我需要它来定位。

这是一个示例。

样机：

原始代码：

HTML：

<div class="background">&nbsp;</div>
<div class="TileText">MyText - Another long, long, long text</div>

CSS ：

.background{
    background-color:#000;
    height: 400px;
    width: 100%;   
}

.TileText{
    position: relative;
    top: -135px;
    max-width: 200px;
    height: 80px;
    background-color: #FFF;
    color: #black;
    clear: both;
    padding-left: 10px;  
}

当前状态：

HTML：

<img src="images/castle.png" width="300" height="333" title="Castle" alt="Castle" />
<div class="TileTextWrapper">
    <div class="TileText">Text</div>
</div>

CSS：

.TileTextWrapper{
    position: relative;
    top: -135px;
    max-width: 200px;
    height: 80px;
    background-color: #FFF;
    color: #57abe9;
    clear: both;
    padding-left: 10px;
    display: table;
}

.TileText{
    display: table-cell;
    vertical-align: middle;
}

更新：

现在文本垂直对齐。但恐怕 display: table 只能在现代浏览器中使用。

Answer 1

我已经更新了你的小提琴：

它似乎可以工作，

请参阅： http://jsfiddle.net/hSCtq/11/供参考。

我会将 .TileText 放在 .background 内。为了背景图像而创建一个空 div 在语义上是不正确的，并且在大多数情况下没有必要。单独背景 div 的一种情况是，您需要将背景图像的不透明度与内容分开设置。

<div class="background">
    <div class="TileText">MyText - Another long, long, long text</div>
</div>


.background {
    background-color:#000;
    height: 400px;
    width: 100%;   
    display: table
}

.TileText{
    max-width: 200px;
    display: table-cell;
    vertical-align: middle;
    color: #fff;
    clear: both;
    padding-left: 10px;  
}

---

其他问题同答案。

水平和垂直居中不使用表格的预标记？

旧的中心图像在 div 问题中（图像大小可变 - div 大小固定）

此外，谷歌搜索“center Vertical text css”的第一个结果将为您提供与我在我的文章中发布的相同的代码结构JS小提琴

Answer 2

在 TileText div 中添加

标签：

HTML

<div class="background">   </div>
<div class="TileText"><p>MyText - Another long, long, long text</p></div>

CSS

.background{
    background-color:#000;
    height: 400px;
    width: 100%;   
}

.TileText{
    position: relative;
    top: -135px;
    max-width: 200px;
    height: 80px;
    background-color: #FFF;
    color: #black;
    clear: both;
    padding-left: 10px; 
}

.TileText p { 
    position:absolute;
    display: table-cell;
    vertical-align: middle

  }

示例：http://jsbin.com/ubixux/2/edit

Answer 3

您必须添加 display:table-cell; 并添加 vertical-align:middle;

Answer 4

要实现垂直对齐，必须使用表格。你可以这样写你的代码：

 <div style="width:600px; height:600px; border:#000000 1px solid;">

    <table style="width:100%; height:100%; vertical-align:middle">
        <tr>
            <td>
    MyText - Another long, long, long text
            </td>
        </tr>
    </table>
</div>