如何在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，以便所有内容都完全位于中间。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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本身使用相同的样式。