Full clickable area and vertical alignment of block element inside a table-cell

Question

Got a simple question, I need a display block element inside a table-cell to take the full available height and width of the cell while the text is also vertically aligned.

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> 

the all thing needs to be responsive so no line-height fix if text drops to 2 lines and number of list elements is flexible that's why I used display:table . However happy with another approach if it can achieve this, for some reason I can't figure out how to vertically align the text in this scenario

Answer 1

Using Flexbox you can archive this:

 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

Your Code Complete Right .but Proper vertical-align: middle; only remove style height: 48px; inside a tag
And li:hover style replace to a:hover

Revise Fiddle

update style

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

at the end I did in this way and works for my requirements

Demo: 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;
}