liamwilt liamwilt - 6 months ago 8
HTML Question

How to center an already vertically aligned menu with list-items of equal width

I must centre the menu and its vertically aligned list items beneath the header "W". The width of the menu should remain equal, set at 100px, but the closest I have come to maintaining that while centring it beneath the header "W" has only come to it being attached to screen-left. No combination of display, margin, or padding has assisted in placing the menu consistently and dynamically beneath the already centred header "W". I've run dry of ideas at the moment and would appreciate some assistance. How can it be accomplished?

Here is my code:



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




Answer

try this add body to text-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>

Comments