Question

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

Here is an example

样机：

Mockup

原始代码：

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;  
}

其他问题和答案相同。

Horizontally and vertically center a pre tag without the use of tables?

The old center a image in a div issue ( image size variable - div size fixed )

此外，谷歌搜索“中心垂直文本CSS”的第一个结果将给你我在我的JSfiddle中发布的相同代码结构

Answer 2

在TileText div中添加<p>标记：

<强> HTML

<div class="background"> &nbsp; </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>

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

4 个答案: