如何将已垂直对齐的菜单与宽度相等的列表项居中

我必须将菜单及其垂直对齐的列表项居中放置在标题"W"下方。菜单的宽度应该保持不变，设置为100px，但我最接近于在标题"W"下居中时保持这一点的是，它只连接到屏幕左侧。没有任何显示、边距或填充的组合有助于将菜单始终动态地放置在已经居中的标题"W"下方。我现在没有什么想法了，希望能给我一些帮助。如何才能做到这一点？

这是我的代码：

* {    
  margin: 0;
  padding: 0;
}
body {  
  background:#e8e8e8;
}
h1 {
  padding: 300px 0px 30px 0px;
  text-align: center;
  font-family: Raleway;
  font-weight: 100;
  font-size: 35px;
}
.menu {  
  display: inline-block;
  text-align: center;
  border-radius:2px; 
  width: 100px;
}
li {  
  list-style:none;
}
li a { 
  display: block;
  padding:25px 25px 25px 25px;
  letter-spacing:1px;
  font-family: Raleway;
  font-weight: 300;
  font-size:30px;
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  transition:.25s;
}
.bg {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: .25s;
  pointer-events: none;
}
       
.menu li:first-child a {  background:#d0d0d0 !important;}
.menu li:nth-child(2) a {  background:#b9b9b9 !important;}
.menu li:nth-child(3) a {  background:#a2a2a2 !important;}
.menu li:nth-child(4) a {  background:#8b8b8b !important;}
.menu li:nth-child(5) a {  background:#747474 !important;}
.menu li:first-child:hover ~ .bg {
  background: #d0d0d0;  
}
.menu li:nth-child(2):hover ~ .bg {
  background: #b9b9b9;
}
.menu li:nth-child(3):hover ~ .bg {
  background: #a2a2a2;
}
.menu li:nth-child(4):hover ~ .bg {
  background: #8b8b8b;
}
.menu li:nth-child(5):hover ~ .bg {
  background: #747474;
}

<body>
<h1>W</h1>
    <ul class="menu">
      <li><a href="me">me</a></li>
      <li><a href="cv">cv</a></li>
      <li><a href="rd">rd</a></li>
      <li><a href="av">av</a></li>
      <li><a href="rr">rr</a></li>
      <li class="bg"></li>
    </ul>   
</body>

尝试将正文添加到文本align:center；

* {    
  margin: 0;
  padding: 0;
}
body {  
  background:#e8e8e8;
  text-align:center;
}
h1 {
  padding: 300px 0px 30px 0px;
  text-align: center;
  font-family: Raleway;
  font-weight: 100;
  font-size: 35px;
}
.menu {  
  display: inline-block;
  text-align: center;
  border-radius:2px; 
  width: 100px;
}
li {  
  list-style:none;
}
li a { 
  display: block;
  padding:25px 25px 25px 25px;
  letter-spacing:1px;
  font-family: Raleway;
  font-weight: 300;
  font-size:30px;
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  transition:.25s;
}
.bg {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: .25s;
  pointer-events: none;
}
.menu li:first-child a {  background:#d0d0d0 !important;}
.menu li:nth-child(2) a {  background:#b9b9b9 !important;}
.menu li:nth-child(3) a {  background:#a2a2a2 !important;}
.menu li:nth-child(4) a {  background:#8b8b8b !important;}
.menu li:nth-child(5) a {  background:#747474 !important;}
.menu li:first-child:hover ~ .bg {
  background: #d0d0d0;  
}
.menu li:nth-child(2):hover ~ .bg {
  background: #b9b9b9;
}
.menu li:nth-child(3):hover ~ .bg {
  background: #a2a2a2;
}
.menu li:nth-child(4):hover ~ .bg {
  background: #8b8b8b;
}
.menu li:nth-child(5):hover ~ .bg {
  background: #747474;
}

<h1>W</h1>
    <ul class="menu">
      <li><a href="me">me</a></li>
      <li><a href="cv">cv</a></li>
      <li><a href="rd">rd</a></li>
      <li><a href="av">av</a></li>
      <li><a href="rr">rr</a></li>
      <li class="bg"></li>
    </ul>   
</body>

一个具有text-align: center的父元素应该能完成任务！

* {    
  margin: 0;
  padding: 0;
}
body {  
  background:#e8e8e8;
}
h1 {
  padding: 300px 0px 30px 0px;
  text-align: center;
  font-family: Raleway;
  font-weight: 100;
  font-size: 35px;
}
.menu {  
  display: inline-block;
  text-align: center;
  border-radius:2px; 
  width: 100px;
}
li {  
  list-style:none;
}
li a { 
  display: block;
  padding:25px 25px 25px 25px;
  letter-spacing:1px;
  font-family: Raleway;
  font-weight: 300;
  font-size:30px;
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  transition:.25s;
}
.bg {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: .25s;
  pointer-events: none;
}
.menu-wrap {
    text-align: center;
}

<h1>W</h1>
    <div class="menu-wrap">
      <ul class="menu">
        <li><a href="me">me</a></li>
        <li><a href="cv">cv</a></li>
        <li><a href="rd">rd</a></li>
        <li><a href="av">av</a></li>
        <li><a href="rr">rr</a></li>
        <li class="bg"></li>
      </ul>   
    </div>
</body>

将其添加到您的身体中。

要了解更多关于flexboxes的信息，这里有一个有趣的游戏：http://flexboxfroggy.com

body {  
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

相关内容

最新更新

热门标签：