HTML和CSS：将导航栏居中

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>

Answer 1

You need to set a width for the #wrapper margin: 0 auto to work :) 您需要为#wrapper margin: 0 auto设置宽度margin: 0 auto工作:)

 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>

Answer 2

in css file, change 在css文件中，更改

div#wrapper { position: fixed; div＃wrapper {位置：固定；

as 如

div#wrapper { position: center; div＃wrapper {位置：居中；

it works then. 然后工作。

HTML和CSS：将导航栏居中

问题描述

2 个解决方案

解决方案1
2 2015-06-19 02:14:32

解决方案2
0 2015-06-25 20:29:47

HTML和CSS：将导航栏居中

问题描述

2 个解决方案

解决方案1 2 2015-06-19 02:14:32

解决方案2 0 2015-06-25 20:29:47

解决方案1
2 2015-06-19 02:14:32

解决方案2
0 2015-06-25 20:29:47