表格單元格內塊單元的完全可點擊區域和垂直對齊

Question

有一個簡單的問題，我需要一個表格單元格內的顯示塊單元來獲取單元格的全部可用高度和寬度，同時文本也垂直對齊。

Fiddle Demo

ul { 
 
    background: yellow; 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 

 
li { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    height: 48px; 
 
} 
 

 
a { 
 
    display: block; 
 
    width: 100%; 
 
    height: 48px; 
 
} 
 

 
a:hover { 
 
    background: red 
 
}

<ul> 
 
    <li> 
 
    <a href="#">Item1</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Item2</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Item3</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Item4</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Item5</a> 
 
    </li> 
 
</ul>

的所有東西必須響應所以沒有行高度固定，如果文本下降到2線和列表中元素的個數是靈活的，這就是爲什麼我用display:table。然而高興的另一種方法，如果能做到這一點，由於某種原因，我無法弄清楚如何垂直對齊文本在這種情況下

Answer 1

末我這樣做，並適用於我的要求

演示： http://codepen.io/anon/pen/RpGPyO

HTML：

<ul> 
    <li> 
    <a href="#">Item1</a> 
    </li> 
    <li> 
    <a href="#">Item2 or something longer</a> 
    </li> 
    <li> 
    <a href="#">Item3</a> 
    </li> 
    <li> 
    <a href="#" >Item4</a> 
    </li> 
    <li> 
    <a href="#" >Item5</a> 
    </li> 
</ul> 

CSS：

ul { 
    background: yellow; 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
} 

li { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    height: 48px; 
    position: relative; 
    z-index: 1; 
} 

a { 
    display: block; 
    width: 100%; 
} 

a:before { 
    content:''; 
    display: block; 
    height: 48px; 
    position: absolute; 
    top: 0; 
    left: 0;  
    z-index: -1; 
    width:100%; 
} 

a:hover:before { 
    background: red; 
} 

Answer 2

你的代碼完全性右。但正確vertical-align: middle;只刪除風格height: 48px;裏面a標籤
而 li:hover風格更換到a:hover

Revise Fiddle

更新風格

a { 
    display: block; 
    width: 100%; 
    word-break: break-all; 
} 

ul { 
 
    background: yellow; 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 

 
li { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    height: 48px; 
 
} 
 

 
a { 
 
    display: block; 
 
    width: 100%; 
 
    word-break: break-all; 
 
} 
 

 
li:hover { 
 
    background: red 
 
}

<ul> 
 
    <li> 
 
    <a href="#">Item1</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Item2 Text isveryveryveryvery longer</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Item3</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Item4</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Item5</a> 
 
    </li> 
 
</ul>

Answer 3

使用Flexbox的可以存檔此：

ul { 
 
    background: yellow; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    width: 100%; 
 
    list-style:none; 
 
    padding:0; 
 
    margin:0; 
 
    align-item:center; 
 
} 
 

 
li { 
 
    text-align: center; 
 
    vertical-align: middle;  
 
    /*width:20%;*/ 
 
    display:flex; 
 
    flex-direction:column; 
 
    flex: 1 0 auto; 
 
} 
 

 
a {   
 
    padding:10px 0; 
 
    display:flex; 
 
    flex-direction:column; 
 
    flex: 1 0 auto; 
 
    justify-content: center; 
 
} 
 

 
a:hover { 
 
    background: red 
 
}

<ul> 
 
    <li> 
 
    <a href="#">Item1</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Item2</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Item3</a> 
 
    </li> 
 
    <li> 
 
    <a href="#" >Item4 with very very long long long text</a> 
 
    </li> 
 
    <li> 
 
    <a href="#" >Item5</a> 
 
    </li> 
 
    <li> 
 
    <a href="#" >Item6</a> 
 
    </li> 
 
    <li> 
 
    <a href="#" >Item7</a> 
 
    </li> 
 
</ul>