垂直居中多線文本div與標記

我正在一個菜單系統，其中包括互相之間的div（寬度：275px，高度：75px，邊框：1px固體）組成。我希望整個div都是可點擊的，我使用標籤和display：block屬性（請參閱下面的代碼）。某些菜單條目是多行文本，但我無法垂直對齊它們。基本代碼：垂直居中多線文本div與標記

.div { 
    width: 275px; 
    height: 75px; 
    border: 1px solid #000; 
    text-align: center; 
    float: right; 
} 

<div class="div"> 
    <a style="display: block; width: 100%; height: 100%" href="#">link..</a> 
</div>

我曾嘗試以下：

的line-height：960x75像素：不具有多行文本工作
顯示：表和垂直對齊：中間不能使用-tag的100％寬度和高度。

我真的嘗試了很多其他代碼與包裝div的表，...但沒有成功。否則，我不想使用javascript（onclick =「location.href」）。

謝謝！

來源

2013-07-18 Jan Eysermans

你可以用你已經試過的東西來做：'display：table-cell; vertical-align：middle;'，你只需要將高度設置爲75px而不是100％。

來源

2013-07-18 10:58:23

的文本然後不垂直居中，但在頂部。見http://jsfiddle.net/GGhvk/25/ –

@JanEysermans對不起，我需要澄清，你必須將這兩個CSS規則應用於內部標記，而不是周圍的div。（見[jsFiddle]（http://jsfiddle.net/RQm2R/）） –

謝謝！這確實是個詭計！ –

使用display：table-cell，實現垂直居中的多行文本。

JSFiddle Demo

CSS：

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

來源

2013-07-18 11:27:22 Girish

這很有效，但我希望整個div可點擊，而不僅僅是文本。 –

垂直居中多線文本div與標記

回答

相關問題