Вертикальное автовыравнивание текста ссылки внутри <li>

Начал тестировать в мобильных браузерах, UC Browser показывал толоко первое слово в тексте ссылки из двух слов между которыми пробел, сделал высоту ссылки auto (она вблочная для выделения всего <li> при наведении, теперь слово выравниваются по верхнему краю. vertical align: middle для <li> и <a> не помог.

<nav>

    <ul class="top_ul">

        <li><a href="#.html">Слово</a></li>

         <li><a href="#i.html">Слово</a></li>

         <li><a href="#.html">Слово слово</a></li>

     </ul>

     <ul>

         <li><a href="#.html">Слово</a></li>

         <li><a href="#.html">Слово-слово</a></li>

         <li><a href="#.html">Слово</a></li>

     </ul>

ul {

        list-style: none;

        }

nav ul {

       display: flex;

       margin: 0;

       padding: 0;

       letter-spacing: -.3em;

        }

     nav li {

        display: inline-block;

        height: auto;

        width: 33%;

        flex-basis: auto;

        flex-grow: 1;

        letter-spacing: normal;

        }

a {

        text-decoration: none;

        outline: none;

        width: 100%;

        height: auto;

        font-size: 1.3em;

        }

nav a {

       display: block;