如何在CSS中居中垂直對齊的菜單？

Question

這裏的HTML代碼本身

html { 
 
    background: url(wallpaper.jpg) no-repeat center center fixed; 
 
    background-size: cover; 
 
} 
 

 
.header { 
 
    text-align: center; 
 
    font-family: impact; 
 
    font-size: 40px; 
 
    margin-left: 500px; 
 
    margin-right: 500px; 
 
    color: gray; 
 
} 
 

 
#introduction { 
 
    font-family: times; 
 
    text-align: center; 
 
    text-decoration: underline; 
 
    color: #1F1B1B; 
 
} 
 

 
.paragraph { 
 
    text-indent: 20px; 
 
    color: gray; 
 
    text-align: center; 
 
    margin-left: 200px; 
 
    margin-right: 200px; 
 
} 
 

 
.rap { 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 

 
ul li a { 
 
    display: block; 
 
    text-align: center; 
 
    font-family: georgia; 
 
    background: rgba(16, 16, 16, 0.4); 
 
    width: 130px; 
 
    text-decoration: none; 
 
    margin: 10px; 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
    color: white; 
 
    font-size: 19px; 
 
    vertical-align: middle; 
 
    list-style: none; 
 
}

<ul> 
 
    <li><a href="#2pac">2pac</a></li> 
 
    <li><a href="#Bigge Smalls">Biggie Smalls</a></li> 
 
    <li><a href="#Nas">Nas </a></li> 
 
    <li><a href="#Jay Z">Jay Z </a></li> 
 
    <li><a href="#T.I.">T.I.</a></li> 
 
</ul>

我能做些什麼，以我爲中心菜單本身？它保持向左移動，我希望整個事情死在我的模擬網站。

Answer 1

更改鏈接是inline-block，並指定text-align: center;的母體中心的聯繫，然後讓一切都在中間正好居中從UL刪除默認padding。

ul { 
 
    text-align: center; 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
ul li a { 
 
    display: block; 
 
    text-align: center; 
 
    font-family: georgia; 
 
    background: rgba(16, 16, 16, 0.4); 
 
    width: 130px; 
 
    text-decoration: none; 
 
    margin: 10px; 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
    color: white; 
 
    font-size: 19px; 
 
    vertical-align: middle; 
 
    list-style: none; 
 
    display: inline-block; 
 
}

<ul> 
 
    <li><a href="#2pac">2pac</a></li> 
 
    <li><a href="#Bigge Smalls">Biggie Smalls</a></li> 
 
    <li><a href="#Nas">Nas </a></li> 
 
    <li><a href="#Jay Z">Jay Z </a></li> 
 
    <li><a href="#T.I.">T.I.</a></li> 
 
</ul>

Answer 2

html { 
 
    background: url(wallpaper.jpg) no-repeat center center fixed; 
 
    background-size: cover; 
 
} 
 

 
.header { 
 
    text-align: center; 
 
    font-family: impact; 
 
    font-size: 40px; 
 
    margin-left: 500px; 
 
    margin-right: 500px; 
 
    color: gray; 
 
} 
 

 
#introduction { 
 
    font-family: times; 
 
    text-align: center; 
 
    text-decoration: underline; 
 
    color: #1F1B1B; 
 
} 
 

 
.paragraph { 
 
    text-indent: 20px; 
 
    color: gray; 
 
    text-align: center; 
 
    margin-left: 200px; 
 
    margin-right: 200px; 
 
} 
 

 
.rap { 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 
/**use text-align**/ 
 
ul li { 
 
    text-align: center; 
 
    list-style: none; 
 
    } 
 
ul li a { 
 
    display: inline-block; /*use inline-block display*/ 
 
    text-align: center; 
 
    font-family: georgia; 
 
    background: rgba(16, 16, 16, 0.4); 
 
    width: 130px; 
 
    text-decoration: none; 
 
    margin: 10px; 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
    color: white; 
 
    font-size: 19px; 
 
    vertical-align: middle; 
 
    list-style: none; 
 
}

<ul> 
 
    <li><a href="#2pac">2pac</a></li> 
 
    <li><a href="#Bigge Smalls">Biggie Smalls</a></li> 
 
    <li><a href="#Nas">Nas </a></li> 
 
    <li><a href="#Jay Z">Jay Z </a></li> 
 
    <li><a href="#T.I.">T.I.</a></li> 
 
</ul>

Answer 3

我個人喜歡的另一招，方便快捷。把它放在一個div容器：

<div id = "menu"> 
    <ul> 
    <li><a href="#2pac">2pac</a></li> 
    <li><a href="#Bigge Smalls">Biggie Smalls</a></li> 
    <li><a href="#Nas">Nas </a></li> 
    <li><a href="#Jay Z">Jay Z </a></li> 
    <li><a href="#T.I.">T.I.</a></li> 
    </ul> 
</div> 

然後，給菜單固定寬度和使用汽車的利潤，這樣的：

#menu { 
width: 1000px; 
margin-right: auto; 
margin-left: auto; 
} 

或者你也可以使用相同的樣式上的UL本身。