div文本垂直對齊

我有2個div：一個父母和一個孩子。用戶可以通過單擊按鈕添加該div，並設置文本值。我想在邊框內嵌塊中顯示這些潛水（1行中的3個項目，例如鉻中的新標籤）。我想在邊界的中心顯示此文本。有CSS代碼：div文本垂直對齊

.parentDiv { 
    width: 300px; 
    height: 200px; 
    margin: 5px; 
    border: solid 1px black; 
    display: inline-block; 
    font-size: 24px; 
} 
.childDiv { 
    text-align: center; 
    vertical-align:middle; 
}

來源

2012-12-21 Andrii

這裏有一個的jsfiddle向您展示一個解決方案：http://jsfiddle.net/nfLu3/

.parentDiv { 
    ... 
    line-height:200px; 
    text-align:center; 
} 

.childDiv { 
    display:inline-block; 
    line-height:1; 
}

鍵是：

設置父容器的line-height其高度（200px）和text-align至center。所以有些文字完全出現在你的盒子中間。
將子容器設置爲display爲inline-block。通過這種方式，它圍繞着文本（這很重要！）。周圍的文本（我的意思是在子容器之前的換行符和空格）有line-height的200px，子塊有vertical-align:middle，所以它會居中。

你去那裏

來源

2012-12-21 22:24:26 bukart

這是很好的，但在Chrome中這是行不通的。我必須補充一點，它可以在Chrome中使用？我只是初學者，不知道。 – Andrii

好吧，我用鉻進行了測試，效果很完美（參見上面的小提琴） – bukart

div文本垂直對齊

回答

相關問題