如何在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本身。