HTML & CSS: Centering the Navbar
Question
I've looked up other people who have had similar problems but I can't seem to find an answer that works for me. I'm trying to center my nav bar but it keeps getting pushed off to the left. Any help would be appreciated! Thanks.
body { background-color: rgb(222, 243, 246); /* background-image: url("Capitola.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: contain; margin: 0; padding: 0; border: 0; */ } div.image { background-image: url("Capitola.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: 100% 100%; margin: 0; padding: 0; border: 10 solid #021a40; position: absolute; height: 100%; width: 100%; } div#wrapper { position: fixed; text-align: center; z-index: 1000; margin: 0 auto; } .navbar ul { list-style-type: none; display: inline-block; padding: 0; margin: 0; overflow: hidden; border-radius: 500px; border: 1px solid black; } .navbar li { float: left; display: inline; text-align: center; } .navbar a { display: inline-block; font-weight: bold; width: 120px; color: black; background-color: rgb(254, 255, 241) /*rgb(219,243,245)*/ ; text-align: center; padding: 10px; text-decoration: none; } .navbar a:hover { background-color: rgb(239, 162, 180); } h1 { font-family: Florence, cursive; margin-top: 8%; margin-left: 60%; color: white; font-size: 3.5em; }
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Michael Leath</title> </head> <body> <div class="image"> <h1>Michael Leath</h1> </div> <div id="wrapper"> <div class="navbar"> <ul> <li><a href="#aboutme">About Me</a> </li> <li><a href="#contact">Contact</a> </li> <li><a href="#education">Eduation</a> </li> <li><a href="#background">Background</a> </li> </ul> </div> </div> </body> </html>
2 answers
solution1
2 2015-06-19 02:14:32
You need to set a width for the #wrapper margin: 0 auto to work :)
body { background-color: rgb(222, 243, 246); /* background-image: url("Capitola.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: contain; margin: 0; padding: 0; border: 0; */ } div.image { background-image: url("Capitola.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: 100% 100%; margin: 0; padding: 0; border: 10 solid #021a40; position: absolute; height: 100%; width: 100%; } div#wrapper { position: fixed; text-align: center; z-index: 1000; margin: 0 auto; width: 100%; } .navbar ul { list-style-type: none; display: inline-block; padding: 0; margin: 0; overflow: hidden; border-radius: 500px; border: 1px solid black; } .navbar li { float: left; display: inline; text-align: center; } .navbar a { display: inline-block; font-weight: bold; width: 120px; color: black; background-color: rgb(254, 255, 241) /*rgb(219,243,245)*/ ; text-align: center; padding: 10px; text-decoration: none; } .navbar a:hover { background-color: rgb(239, 162, 180); } h1 { font-family: Florence, cursive; margin-top: 8%; margin-left: 60%; color: white; font-size: 3.5em; }
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Michael Leath</title> </head> <body> <div class="image"> <h1>Michael Leath</h1> </div> <div id="wrapper"> <div class="navbar"> <ul> <li><a href="#aboutme">About Me</a> </li> <li><a href="#contact">Contact</a> </li> <li><a href="#education">Eduation</a> </li> <li><a href="#background">Background</a> </li> </ul> </div> </div> </body> </html>
solution2
0 2015-06-25 20:29:47
in css file, change
div#wrapper { position: fixed;
as
div#wrapper { position: center;
it works then.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
HTML centering navbar with an image/video
Centering the submenu CSS and HTML
HTML and CSS centering
Centering a DIV in CSS/HTML
Centering image css/html
Link centering with HTML and CSS
Centering a slideshow with HTML and CSS
CSS HTML: Centering divs
Problems with centering in CSS, HTML
Centering Footer With CSS/HTML
Related Tags