HTML CSS examples for CSS Widget:Header
Vertically center li in ul within header
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .header {<!-- www .j a v a 2 s .c om--> background: #F5F5F5; border-bottom: 1px solid grey; position:fixed; min-height: 50px; width:100%; left:0; right:0; } .header ul { display:table-row; list-style:none; height:100px; text-align:center; float:right; width:100%; } .header ul li { display:inline-block; vertical-align:middle; text-transform: uppercase; margin-left: 35px; letter-spacing: 3px; } a { color:black; text-decoration: none; } a:hover { text-decoration:none; color:#33b5e5; } #logo { border: 2px solid #33b5e5; background-color:#99cc00; display:table-cell; vertical-align:middle; color:white; font-size:2em; font-weight: 700; text-transform: none; padding:5px; } </style> </head> <body> <div class="header"> <ul> <li> <a href="#"> <div id="logo"> BASE </div> </a> </li> <li> <a href="#">home</a> </li> <li> <a href="#">products</a> </li> <li> <a href="#">features</a> </li> <li> <a href="#">contact</a> </li> </ul> </div> </body> </html>