How do i center my nav bar?
|
3:36 AM |
No comments |
How do i center my nav bar?
As title says, my nav bar is displaying to the left and i want it in the center but i tried everything but doesnt seem to be working. I used it this way for responsiveness which works but it wont center! Please help, thanks!
Here is my code
.menu ul{ width:100%; text-align: center; list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #3399ff; } .menu li{ display: block; float: left; border-right: 1px solid #bbb; } .menu li:last-child { border-right: none; } .menu li a{ display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; font-family: Arial, sans-serif; font-size: large; } .menu a:hover{ background-color: #111; }Answer by user2314737 for How do i center my nav bar?
With display: inline-block and removing the float: left for the menu items you can center the navigation bar.
EDIT: added font-size:0 to the styling of ul as suggested in this answer
.menu ul{ width:100%; text-align: center; list-style-type: none; font-size:0; margin: 0; padding: 0; overflow: hidden; background-color: #3399ff; } .menu li{ display: inline-block; border-right: 1px solid #bbb; } .menu li:last-child { border-right: none; } .menu li a{ display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; font-family: Arial, sans-serif; font-size: large; } .menu a:hover{ background-color: #111; Answer by drosam for How do i center my nav bar?
You can set the ul has display: inline-block and the center it and give background-color: #3399ff; to .menu to have the whole width with the correct color. Check this
.menu { text-align: center; background-color: #3399ff; } .menu ul{ display: inline-block; text-align: center; list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #3399ff; } .menu li{ display: block; float: left; border-right: 1px solid #bbb; } .menu li:last-child { border-right: none; } .menu li a{ display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; font-family: Arial, sans-serif; font-size: large; } .menu a:hover{ background-color: #111; }Answer by hmjha for How do i center my nav bar?
put margin: 0 auto; for center aligning of a block.
Answer by Joe Bashe for How do i center my nav bar?
Here is one way to do it:
.menu { background-color: #3399ff; width: 100%; } .menu ul { width: 24rem; text-align: center; list-style-type: none; margin: 0 auto; padding: 0; overflow: hidden; } Make the .menu itself width 100%, and make ul an internal container with fixed width, then center it using margin: 0 auto;, leaving the rest the same.
http://codepen.io/bashedev/pen/KzdbGy
Answer by Leo The Four for How do i center my nav bar?
The best way to center a single div in screen is to use
margin: 0 auto; And the best way to center your elements inside the div is to use
display:flex; justify-content:space-between in your CSS
Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72
0 comments:
Post a Comment