表格单元格内块单元的完全可点击区域和垂直对齐

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>