我的网站上的主菜单栏出现问题。为了清楚起见，我指的是我网站上的菜单栏，其中包含诸如＆＃34;关于＆＃34;和＆＃34;家＆＃34;。我希望这个菜单栏位于中心（它位于我的计算机上，它有一个15＆＃34;屏幕）。然而，当我在其他计算机上查看我的网站时，一些屏幕更大，菜单栏显示偏离右侧或左侧中心，看起来有点垃圾。如何标准化菜单栏的位置，使其位于中心，无论使用何种互联网浏览器或不同的屏幕尺寸？
谢谢
本
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="aboutme.css">
<title>It's all about me!</title>
</head>
<body>
<div id="content">
<header>
<div class="grow">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="aboutme.html">About me</a></li>
<li><a href="like.html">What I love</a></li>
</ul>
</div>
</header>
<h1>About Me</h1>
<img src="ben.jpg" id="ben">
<h2>The Beginning:</h2>
<div id="beginning">
<p>I absolutely love coding ever since I was young. I started finding the fascination with it when I started playing a game called "runescape". When I started playing in 2007, the "botting" community started to grow massively. As a full time gamer, I found this out within that community. During my subscription with the botting client "powerbot", I started to learn JAVA and played around with other people's code. Even though I never became an expert within that language, I managed to design simple scripts which allowed my character to level up on basic skills whilst I was alseep! I loved the problem solving! I absolutely loved the community and how everyone worked as a team. However, I soon grew out of it after Runescape's anti-botting software got too advanced and I decided to play normally!
</div>
<h3>SEO and Web Developing:</h3>
<div id="seo">
<p>After finishing my education, I decided not to study a degree as there wasn't anything that I felt suited me at that time. I preferred to take on more of an entrepreneurial career. I decided to join my friend's business "GR Syndicate". Over that following years, I learnt SEO and Web developing. The Web Developing purely consisted of only coding with HTML and CSS and the websites we created were used to sell cosmetic products off. During that time, I built upon my SEO skills and developed them to rank high in Google's SERPS.
</p>
</div>
<h4>The Present</h4>
<div id="present">
<p>After working in GR Syndicate and in customer service, coding was missing from my life. This is when I decided to practice my code by building a website about one of my other passions, dogs. This gave me the opportunity to really understand CSS3 and HTML5. Even though I find CSS3 hard as there are a lot of interactive elements involved, it is my favorite part of CSS. I absolutely love the animations I see on "CSS Deck" being created the whole time. This gave me the motivation to add a couple of CSS3 elements in this website, and in my other website, such as a hero that consisted of changing pictures. After learning about more code from producing the dog website, I realised how much I loved doing it. This is when I started looking at courses, and found General Assembly. I went to the open day and I was very impressed, and I hope you are too with this website! </p>
</div>
</body>
</html>
------------------------CSS in another file------------------------
body {
background-image: url(puppy.jpg);
}
h1 {
font-family: 'Lobster', cursive;
position: absolute;
left: 200px;
text-decoration: underline;
}
#content
{ font-family:'lobster', cursive;
position: absolute;
width: 500px;
font-size: 23px;
top: 80px;
left: 25px;
}
.grow {
position: absolute;
left: 550px;
top: 700px;
}
a {
color: black;
text-decoration: none;
font-weight: bold;
}
ul {
padding: 10px;
background: #dcf3ff;
border-width: 6px;
border-style: solid;
border-color: white;
}
li {
display: inline;
padding: 0px 15px 0px 15px;
border-right: 2px solid black;
border-left: 2px solid black;
}
.grow {
display: inline-block;
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
#box {
width: 485px;
height: 500px;
}
答案 0 :(得分：0)
首先从你的元素中移除绝对位置，总是position:absolute给出一个div中心是不必要的。
然后按如下方式更改样式
#content {
font-family:'lobster', cursive;
width: 500px;
font-size: 23px;
margin:auto;
}
<强>已更新
ul{
list-style-type:none;
width:500px;
position:absolute;
bottom:0;
}
ul li{
display:inline-block;
}
ul li a{
display:block;
color:#000;
text-decoration:none;
}
答案 1 :(得分：0)
如果您为屏幕上的条形图定位正确的值，您可以实现您想要的效果，但是，难以保持在不同屏幕几何图形上的定位。如果你真的想在屏幕的中心底部放置一个元素，那么这可以帮助你（example fiddle here）：
HTML：
<nav id="Navbar">
<ul id="Buttonbar">
<li>Link</li>
<li>Link #2</li>
</ul>
</nav>
CSS：
#Navbar {
display: block;
overflow: hidden;
width: 100%;
height: 64px;
position: absolute;
bottom: 15px;
}
#Buttonbar {
display: block;
overflow: hidden;
padding: 0px;
width: 400px;
height: 100%;
margin: 0px auto 0px auto;
background: grey;
}
#Buttonbar>li{
display: block;
float: left;
overflow: hidden;
list-style: none;
padding: 0px;
margin: 0px;
}
请注意，我已使用nav元素作为我的持有者，给它100％宽度，以便调整到任何屏幕/窗口几何体，然后我给了ul一个绝对大小（以及背景）所以它总是在中间。然后我就把我的nav设置在底部，把所有东西放在那里。提示：如果您希望导航栏始终位于底部，您还可以使用fixed定位属性。
答案 2 :(得分：0)
在这里，我已经根据我的相信程度编辑了您的网站：http://jsfiddle.net/ctwheels/3rqyk9fm/2/
<强> HTML
<body>
<div id="content">
<h1>About Me</h1>
<h2>The Beginning:</h2>
<div id="beginning">
<p>I absolutely love coding ever since I was young. I started finding the fascination with it when I started playing a game called "runescape". When I started playing in 2007, the "botting" community started to grow massively. As a full time gamer, I found this out within that community. During my subscription with the botting client "powerbot", I started to learn JAVA and played around with other people's code. Even though I never became an expert within that language, I managed to design simple scripts which allowed my character to level up on basic skills whilst I was alseep! I loved the problem solving! I absolutely loved the community and how everyone worked as a team. However, I soon grew out of it after Runescape's anti-botting software got too advanced and I decided to play normally!</p>
</div>
<h3>SEO and Web Developing:</h3>
<div id="seo">
<p>After finishing my education, I decided not to study a degree as there wasn't anything that I felt suited me at that time. I preferred to take on more of an entrepreneurial career. I decided to join my friend's business "GR Syndicate". Over that following years, I learnt SEO and Web developing. The Web Developing purely consisted of only coding with HTML and CSS and the websites we created were used to sell cosmetic products off. During that time, I built upon my SEO skills and developed them to rank high in Google's SERPS.</p>
</div>
<h4>The Present</h4>
<div id="present">
<p>After working in GR Syndicate and in customer service, coding was missing from my life. This is when I decided to practice my code by building a website about one of my other passions, dogs. This gave me the opportunity to really understand CSS3 and HTML5. Even though I find CSS3 hard as there are a lot of interactive elements involved, it is my favorite part of CSS. I absolutely love the animations I see on "CSS Deck" being created the whole time. This gave me the motivation to add a couple of CSS3 elements in this website, and in my other website, such as a hero that consisted of changing pictures. After learning about more code from producing the dog website, I realised how much I loved doing it. This is when I started looking at courses, and found General Assembly. I went to the open day and I was very impressed, and I hope you are too with this website!</p>
</div>
</div>
<div id="mainMenu">
<div class="grow">
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="aboutme.html">About me</a>
</li>
<li><a href="like.html">What I love</a>
</li>
</ul>
</div>
</div>
</body>
<强> CSS
body {
font-family:'Lobster', cursive;
color:black;
min-width:500px;
}
#content {
width: 500px;
font-size: 23px;
margin:auto;
position:relative;
}
#content>h1 {
text-align:center;
text-decoration: underline;
}
a {
color: black;
text-decoration: none;
font-weight: bold;
}
#mainMenu ul {
margin:0 auto;
padding: 10px;
background: #dcf3ff;
border-width: 6px;
border-style: solid;
border-color: white;
}
#mainMenu ul>li {
display: inline-block;
padding: 0px 15px 0px 15px;
border-right: 2px solid black;
border-left: 2px solid black;
}
#mainMenu {
left:0;
right:0;
position:absolute;
min-width:500px;
}
#mainMenu>.grow {
position:relative;
width:100%;
text-align:center;
}
.grow {
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}