表格单元中块元素的完整可点击区域和垂直对齐

Question

有一个简单的问题，我需要一个表格单元内的显示块元素来获取单元格的全部可用高度和宽度，同时文本也要垂直对齐。

小提琴演示

 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

使用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> 

Answer 2

您的代码完全正确。但正确的 vertical-align: middle; 仅删除样式 height: 48px; 里面 a 标签
将 li:hover样式替换为a:hover

修订小提琴

更新样式

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

最后，我以这种方式做了，并且可以满足我的要求

演示： 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;
}