Вертикальное выравнивание не работает

Question

Я пытаюсь центрировать текст класса «ссылка» посередине на оси Y. Он, кажется, не центрируется по оси Y, я пробовал «средний» и «центр». Может быть, потому, что текст встроен? Или это может быть связано с другими тегами CSS? Могу ли я помочь? Я представил 2 части кода ниже.

#top { 
 
    z-index: -1; 
 
    height: 100%; 
 
    margin: 0; 
 
    background: linear-gradient(to right, #00ace6, #007399); 
 
} 
 
#toggle { 
 
    display: none; 
 
} 
 
input[type=checkbox]:checked ~ #nav { 
 
    animation: fadein 1s 1 forwards; 
 
    display: initial; 
 
    vertical-align: middle; 
 
} 
 
#menuicon { 
 
    z-index: 10; 
 
    width: 50px; 
 
    background: rgba(0, 0, 0, 0.1); 
 
} 
 
#nav { 
 
    opacity: 0; 
 
    display: none; 
 
    position: absolute; 
 
    padding: 0; 
 
    margin: 0px; 
 
    height: 50px; 
 
    width: 50%; 
 
    z-index: 11; 
 
    background: rgba(0, 0, 0, 0.1); 
 
    border-radius: 0px 20px 20px 0px; 
 
} 
 
#nav li { 
 
    top: 50%; 
 
    color: white; 
 
    display: inline; 
 
    vertical-align: middle; 
 
} 
 
#nav li a { 
 
    margin-top: 5%; 
 
    text-decoration: none; 
 
    color: white; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
} 
 
#link { 
 
    vertical-align: middle; 
 
}

<div id="top"> 
 
    <input type="checkbox" id="toggle"> 
 
    <label for="toggle"> 
 
    <img id="menuicon" src="images/icons/Kitkatbar2.png"> 
 
    </label> 
 
    <ul id="nav"> 
 
    <li class="link"><a href="#">About me</a> 
 
    </li> 
 
    <li class="link"><a href="#">Work</a> 
 
    </li> 
 
    <li> 
 
     <a href="https://twitter.com/Littlebigbloxs"> 
 
     <img src="images/icons/twitterICON.png" style="height: 100%; border-radius: 10px;"> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="https://www.roblox.com/users/19619052/profile"> 
 
     <img src="images/icons/robloxICON.png" style="height: 100%; border-radius: 10px;"> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="mailto:littlebigblox@gmail.com"> 
 
     <img src="images/icons/emailICON.png" style="height: 100%; border-radius: 10px;"> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
    <h1 class="Title">littlebigblox</h1> 
 
    <p align="center"></p> 
 
</div>

Answer 1

Попробуйте перейти от ул к таблице. Как что:

<table><tr><td>About me </td><td>Work </td></tr></table> 

Так, с таблицы теге вы можете использовать Вертикальное выравнивание в тд.

Answer 2

Изменение родителей дисплей до дисплей: стол. Затем измените детей дисплей до дисплей: table-cell. Таким образом, вы можете использовать свойство vertical-align: middle.