list links in boxes; vertically centered text with one or two lines

index.css

li {
  display: block;
  height: 50px;
  line-height: 50px;  /* line-height is the same as the height of this element */
  text-align: center;
  width: 140px;    
}

li a {
  display: block;     /* fills the li */
  border: 1px solid #CCC;
  font-size: 14px;
}

li a:hover {
  background: transparent;
  border: 1px solid #39C;
  color: #39C;
}

li span {
  display: inline-block;  /* inline-block and resetting line-height lets the magic happen */
  line-height: normal;
  vertical-align: middle; /* vertical-align makes the magic happen */
}

index.html

<!-- thanks to this stack overflow question for setting me on the right path: http://stackoverflow.com/questions/4095165/center-single-and-multi-line-li-text-vertically -->

<ul>
  <li>
    <a href="#">               <!-- needs to fill containing li -->
      <span>link text</span>   <!-- needs to be vertically centered -->
    </a>
  </li>
  <li>
    <a href="#">
      <span>some really long link text that will break across two lines</span>
    </a>
  </li>
</ul>