html - Navigation bar not centering -
html :
<nav> <ul> <li><a href="index">home</a></li> <li><a href="history">history</a></li> <li><a href="appointments">appointments</a></li> <li><a href="contactus">contact us</a></li> </ul> </nav>
css :
nav { position: relative; margin: auto; padding: 0; list-style: none; width: 100%; display: center;} nav ul li { display: inline; } nav ul li { display: inline-block; text-decoration: none; padding: 5px 0; width: 100px; background: #cc3399; color: #eee; float: left; text-align: center; border-left: 1px solid #fff; } nav ul li a:hover { background: #a2b3a1; color: #000 }
basically, i've managed make navigation bar, fits specifications. however, it's not centered, it's in position vertically, horizontally it's way left , no near center of page.
one solution replace inline
inline-block
, use text-align: center
parent(also display: center
not valid css):
nav { position: relative; margin: auto; padding: 0; list-style: none; width: 100%; text-align: center;/*add text align-center*/ } nav ul li { display: inline-block;/*replace inline inline-block*/ } nav ul li { display: inline-block; text-decoration: none; padding: 5px 0; width: 100px; background: #cc3399; color: #eee; float: left; text-align: center; border-left: 1px solid #fff; } nav ul li a:hover { background: #a2b3a1; color: #000 }
<nav> <ul> <li><a href="index">home</a> </li> <li><a href="history">history</a> </li> <li><a href="appointments">appointments</a> </li> <li><a href="contactus">contact us</a> </li> </ul> </nav>
Comments
Post a Comment