Question

我有一个高度为200px的div。我有文字，有时一行，有时两行。当文本的高度发生变化时，我如何将文本居中？看起来这很简单，但我无法在任何地方找到解决方案。

现在我的html是<div class="class1"><?php echo $variable; ?></div>

我的css是

.class1 {
display:inline-block;
position:absolute;
left:235px; //Unimportant to question
height:200px;
width:415px;
top:15px;
text-align:center;
font-size:36px;
vertical-align:middle;
}

虽然这不是它的中心。我尝试使用line-height:200px;，但是当我的文字变为两行时，下一行是第一行下的200像素。

Answer 1

您可以添加虚拟元素（或使用:before）并将其高度设置为100％。然后，使用内联块和vertical-align，您可以垂直居中：

.vertical-center:before, .vertical-center > * {
    display: inline-block;
    vertical-align: middle;
}
.vertical-center:before {
    height: 100%;
    content:'';
}

Demo

Answer 2

通过使用vertical-align:middle;和display:table-cell;，您可以垂直显示多行文字。

<强> jsFiddle example

div {
    width:200px;
    height:200px;
    border:1px solid #999;
    display:table-cell;
    vertical-align:middle;
}

Answer 3

尝试添加

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

到你的div。

Demo

Answer 4

您可以使用valign HTML属性或vertical-align CSS属性：

.your-div
{
    text-align: center;
    height: 200px;

    vertical-align: middle;
}

Answer 5

你是对的，很简单。使用以下：

<div style="vertical-align: middle; ">
   <p>some text</p>
</div>

垂直对齐固定div中的动态文本

5 个答案: