A little something about everything

internet marketing and website development made simple..

Vertical alignment of a menu using pure css

Many methods for this are workarounds or hacks that break other elements or don't work on some browsers. However, you can do this quite simply using flex.

For example:

html

<body>
 <div id="menubox">
  <ul id="menu">
   <li>menu item 1</li>
   <li>menu item 2</li>
   <li>menu item 3</li>
  </ul>
 </div>
</body>

css

#menubox {
 position:absolute;
 display:flex;
 flex-direction: column;
 width:15rem;
 height:100%;
}
#menu {
 list-style:none;
 margin: auto 0;
}

 

Add comment

Loading