垂直对齐不起作用

我正在尝试将Y轴中间的类“链接”的文本居中。它似乎并不以Y轴为中心，我尝试过“中”和“中”。这可能是因为文本内联？或者也可能是因为其他CSS标签？我可以得到一些帮助吗？我提供了以下两段代码。垂直对齐不起作用

#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:[email protected]"> 
 
     <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>

来源

2016-07-04 user3051697

这个问题的标题奇怪地发布了，它的意思是说“垂直对齐不起作用” – user3051697

试图改变从UL到表。这样的：

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

所以，用表标签，你可以在TD使用垂直对齐。

来源

2016-07-04 18:41:24

您应该避免使用表格进行布局，而是将它们用于表格数据。 – j08691

更改父母display to display：table。然后，将儿童显示更改为显示：表格单元。这样，您可以使用垂直对齐：中间属性。

来源

2016-07-04 18:52:55 BlueBird03

垂直对齐不起作用

回答

相关问题