如何調整框的大小，但仍然把文本放在它的中心？

在下面的HTML：如何調整框的大小，但仍然把文本放在它的中心？

<div class='title'><h2>Title</h2></div>

我要調整框的大小，這樣寫道：

.title { 
display: block; 
border-radius: 12px; 
border: 1px solid; 
}

然而，得到的盒子看起來有點大，所以我試圖調整其大小。

.title { 
height: 90%; 
}

但是，即使我試圖寫上面的代碼，結果框不受設置的影響。

.title { 
height: 100px; 
}

這工作。但是，它內部的文本不在中心位置，所以我試圖將它放在中心位置。

.title h2 { 
vertical-align: middle; 
}

但是，這是行不通的。

所以，我怎麼能調整框，但仍然有它裏面的文字是否完整？

還有，爲什麼第一高度設置不工作，但第二個呢？

謝謝。

來源

2013-08-07 Blaszard

嘗試申請：（working jsFiddle）

.title h2 { 
    margin:0px; 
    line-height:100px; /* change to fit your needs */ 
}

vertical-align是不是在這種情況下，最好的辦法..

UPDATE：

使用this jsFiddle，而是使用vertical-align如你想你不需要申請的h2的line-height ..祕密正在父display:table;和孩子display:table-cell：

.title { 
    display: table; /* Here's the trick */ 
    border-radius: 12px; 
    border: 1px solid; 
    height: 100px; 
    width:100%; 
} 

.title h2 { 
    display:table-cell; /* Here's the trick */ 
    height:100%; 
    vertical-align:middle; 
}

來源

2013-08-07 16:35:44

感謝。但是我知道這種方法必須將.title的高度和.title h2的行高設置爲相同的值，對嗎？您的代碼按預期工作，但在移動設備上查看時，這看起來沒有破壞性？這就是爲什麼我希望通過百分比，我認爲應該在響應網站上使用... – Blaszard

@ user2360798更新設置的高度。這現在應該如你所願。勾選[新的jsfiddle（http://jsfiddle.net/uYXa5/1/） –

雖然我還是要了解關於'display'部分的招數，你更新的代碼工作完全一樣我想要的。非常感謝。 – Blaszard

檢查這個jsfiddle。您可以設置line-height屬性來實現此目的。

h2{line-height: 50px;}

來源

2013-08-07 16:43:51 deepakb

如何調整框的大小，但仍然把文本放在它的中心？

回答

相關問題