在固定div內垂直對齊動態文本

我有一個高度爲200px的div。我在那裏有文字，有時是一行，有時是兩行。當文本的高度發生變化時，如何將文本居中放在那裏？這似乎很簡單，但我無法在任何地方找到解決方案。在固定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個像素。

來源

2014-02-08 Alesana

你能提供代碼樣本？沒有任何上下文很難確定解決方案。 – badAdviceGuy

@badAdviceGuy我已添加樣本。我很抱歉沒有在樣本中發佈。 – Alesana

嘗試增加

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

您股利。

Demo

來源

2014-02-08 17:04:33 Oriol

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

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

    vertical-align: middle; 
}

來源

2014-02-08 17:07:02 Reflection

你是對的，這很簡單。使用下列內容：

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

來源

2014-02-08 17:08:12

通過使用vertical-align:middle;和display:table-cell;可以在垂直方向的多行文本。

jsFiddle example

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

來源

2014-02-08 17:08:54 j08691

添加display：table-cell;垂直對齊：中部;對我的文本沒有任何影響：/ – Alesana

您是否刪除了顯示內嵌塊代碼？ – j08691

位置：div上絕對必要嗎？ – j08691

可以添加虛設元件（或使用:before）和其高度設定爲100％。然後，使用內嵌塊和vertical-align，您可以垂直中心：

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

Demo

來源

2014-02-08 17:16:44 Oriol

這與第一行垂直對齊，但在文本爲兩行的情況下，第一行下面的第二行爲200px（我假設爲200px）。 – Alesana

@ user2087587您必須將內容放入內聯塊封裝器中。 – Oriol

我將我的html更改爲

*text*

，並將.class2 {display：inline-block;}添加到我的代碼中，現在當文本是一行時，它完全垂直對齊。然而，當它是兩行時，現在兩行都從div的頂部向下移動了200px。我不知道爲什麼。 – Alesana

在固定div內垂直對齊動態文本

回答

相關問題