css - displaying anchor tag with both block and table-cell features -

so, have following code:

<div class="flexslider" id="carousel">     <ul class="thumbs">         <li class="thumbnail">             <a href="#">really long link happens move multiple lines</a>         </li>         <li class="thumbnail">             <a href="#">link 2</a>         </li>         <li class="thumbnail">             <a href="#">link 3 </a>         </li>         <li class="thumbnail">             <a href="#">link 4</a>         </li>     </ul> </div> 

with folllowing css:

.flexslider ul.thumbs {     margin: 0;     display: table;     height: 100px; }  .flexslider li.thumbnail {     list-style: none;     width: 25%;     height: 100px;     display: table-cell;     border-right: solid 1px #000000;     text-align: center;     vertical-align: middle;     background-color: #eeeeee; }  .flexslider li.thumbnail {     display: block;     width: 100%;     height: 100%;     padding: auto 5px;     vertical-align: middle; } 

the problem this. want link fill entire area - display: block;. however, want text vertical-align: middle;. however, if have display set block, fills area, doesn't vertically align text. if change display table-cell, text aligns properly, a doesn't fill entire li. can't figure out how make both.

thoughts?

thanks!

you need set line height height of li. check it!

http://codepen.io/tylerism/pen/nqxljm

.flexslider li.thumbnail {     display: block;     width: 100%;     line-height:100px;    } 

edit: updated my codepen. using bit of hack put anchor tag on outside of li. work you?