Vertical align of a span inside wide anchor

by framj00

HTML

<ul>
         <li>
            <a href=''><span>Some text here, some text</span></a>
         </li>
         <li>
            <a href=''><span>Some text here, some<br>text 2222222</span></a>
         </li>
      </ul>

CSS

html, body {
   margin: 0;
   padding: 0;
}

ul {
   margin: 0;
   padding: 0;
   height: 83px;
   border: 1px solid green;
   display: table;
   width: 100%;
}

ul li {
   list-style-type: none;
   background: salmon;
   height: 100%;
   width: 50px;
   text-align: center;
   vertical-align: middle;
   display: table-cell;
}

ul li a {
   width: 100%;
   height: 100%;
   display: inline-block;
   background: green;
}

ul li a span {
   position: relative;
   display: block;
   background: mediumaquamarine;
}

JavaScript

$( document ).ready(function() {
   $( "span" ).each(function() {
      var h = $(this).height();

      var h2 = eval(h/2);

      $(this).css( {
         "position": "relative",
         "top": "50%",
         "margin-top": "-" + h2 + "px"
      });


   });
});