Question

我试图将文字居中（水平和垂直），我对此有点困难。

这是我尝试的，但只是水平居中，而不是垂直居中。

如何在中心获取此文本？

<div class="playerDetailsPage">
            <p>
                <h4>The text will be in the center</h4>
            </p>

        </div>

CSS

    .playerDetailsPage {
    background-color: #edd4d4; 
    width: 630px;
    height: 390px;
    text-align: center; 
    vertical-align: middle;
    line-height: 390px;
}

Answer 1

不要使用表格来做这类事情。使用表格无法解决问题。

对于我所看到的，它是完美的。以下是一个有效的示例： http://jsfiddle.net/T7V58/1/

你的代码是正确的，有什么问题？只需删除p标记即可。

<div class="playerDetailsPage">
           <h4>The text will be in the center</h4>
    </div>

CSS：

   .playerDetailsPage {
    background-color: #edd4d4; 
    width: 630px;
    height: 390px;
    text-align: center; 
    vertical-align: middle;
    line-height: 390px;
}

Answer 2

垂直对齐中间对div不执行任何操作（在显示屏上不执行任何操作：完全阻止元素）。垂直对齐与表格单元格一起使用。 评论中发布的示例将h4对齐，因为行高与父div的高度完全相同。但是当你有两行（或更多）行文字时会发生什么？那会破裂。

解决方案：

<div class="parent">
    <div class="aligner">
       <h4>The text will be in the center which can be several lines long, and will not break the verical centering. Lorem ipsum more text.</h4>
    </div>  
</div>

.parent {
background-color: #edd4d4; 
width: 630px;
height: 390px;
text-align: center; 
}

.parent .aligner {
display: table-cell;
height: inherit;
width: inherit;
vertical-align: middle;
}

你应该使用一个内部对齐器div并将其显示为一个表格单元格（因此，垂直对齐将起作用。你必须指定内部元素的高度和宽度，但幸运的是，继承是拯救（所以你不要这样做）必须再次冗余地指定它。）

希望它有所帮助！

将文本居中在div中

2 个答案: