垂直對齊不起作用

我正在嘗試將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

垂直對齊不起作用

回答

相關問題