Only CSS. 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 {
   min-height: 50%;
   position: relative;
   top: 25%; bottom: 25%;
   display: block;
   background: mediumaquamarine;
}