定心文本垂直，因爲它生長，在子類

我有一個父容器（如彈出），其中我有附加到父容器的子元素。子元素是一個有一些文本的div。我想將文本居中放置在div中，以便文本保持居中對齊在子div中，但文本應該在垂直方向上自對齊，因爲它長到3-4行以上。我可以隨着文字的增長垂直對齊文本，但是當它仍然是一個小文本時，它應該是垂直居中，這不會發生。我已經在子類中嘗試了很多CSS屬性。任何幫助都會很好。定心文本垂直，因爲它生長，在子類

.parentclass { 
    position: absolute; 
    top: 110px; 
left: 165px; 
width: 470px; 
height: 260px; 
text-align: center; 
background-image: url(../images/Notification_BG.png); } 

.childclass { 
position: relative; 
position: inherit; 
width: 430px; 
height: 192px; 
left: 50%; 
top: 50%; 
margin-left: -215px; 
margin-top: -96px; /* Negative half of height. */ 
text-align: center; 
text-overflow: -o-ellipsis-lastline; 
border: 1px solid blue; 
font-family: Arial; 
font-size: 28px; 
color: white; }

感謝 KK

來源

2012-12-28 KK123

嘗試變換https://developer.mozilla.org/en-US/docs/CSS/transform –

具有u使用vertical-align:middle;？

試試這個：

 
.childclass { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

這個環節一定會幫助你：

vertically-center-text-in-a-100-height-div

來源

2012-12-28 05:43:20

我已經肯定使用了這些CSS屬性，但似乎不起作用。我需要在Opera瀏覽器上使用我的解決方案。 – KK123

任何其他建議。在這種情況下，表格屬性可能不起作用。 – KK123

我已經在很多情況下使用過它，它爲我工作。已經移除了位置相對，頂部，左邊等等，嘗試刪除它們並使用dislay：table-cell; 告訴我它是否有效。 –

用你的父類顯示爲表和childclass顯示爲一個表單元格和垂直 - 對齊：中間會工作肯定

HTML

<div class='parentclass'> 
<div class='childclass'>Text which is more than two or three lines</div> 
</div>

的CSS

.parentclass { 
height: 260px; 
text-align: center; 
display:table; 
} 
.childclass { 
vertical-align: middle; 
width: 430px; 
top: 50%; 
text-align: center; 
text-overflow: -o-ellipsis-lastline; 
border: 1px solid blue; 
font-family: Arial; 
font-size: 28px; 
color: black; 
}

See this fiddle for demo

來源

2012-12-28 06:21:46 Dineshkani

是的，您的表格的單元格正在工作，但我希望文本來兩行，現在文本開始非常接近邊界，我希望它開始與左邊界的一些間距。 – KK123

使用text-indent：20px;在childclass的CSS屬性得到你想要的東西 – Dineshkani

@Dinesh ......那作品...現在我想實現......如果文本通過使用CSS MAX-height屬性擴展超出圖形區域ieParentclass高度的界限謝謝，文本應該截斷使用CSS屬性文本溢出：-o-ellipsis-lastline; ...我也發現這個問題...任何想法:) – KK123

定心文本垂直，因爲它生長，在子類

回答

相關問題