之前可能已经回答了这个问题，我的搜索没有引导我得到任何答案，所以如果已经有一个可能有帮助的帖子，我会提前道歉。
我意识到页面看起来很糟糕，从我自己的PC看起来好多了。在涉及不同的分辨率时，我真的只是在导航栏上没有以幻灯片为中心的问题。
HTML：
</div>
<div id="schedule">
<p> </p>
</div>
<div id="wrap">
<ul class="navbar">
<li><a href="PDFs/2014/LHS Course Catalog 2013-2014.pdf">Courses</a>
</li>
<li><a href="Faculty.html">Faculty</a>
</li>
<li><a href="Programs.html">Programs and Athletics</a>
</li>
<li><a href="">Information ▽</a>
<ul>
<li><a target="_blank" href="https://parentlink.ccsd.net/html/ContentBase/Content/Home/Login">ParentLink</a>
</li>
<li><a target="_blank" href="https://twitter.com/">Twitter</a>
</li>
<li><a target="_blank" href="https://www.facebook.com/">Facebook</a>
</li>
<li><a href="Handouts.html">Important Handouts</a>
</ul>
</li>
</ul>
</div>
<br />
<div id="slide_background">
<!-- Start WOWSlider.com BODY section id=wowslider-container4 -->
<div id="wowslider-container4">
<div class="ws_images">
<ul>
<li>
<img src="#" />
</li>
<li>
<img src="#" />
</li>
<li>
<img src="#" />
</li>
<li>
<img src="#" />
</li>
<li>
<img src="#" />
</li>
</ul>
</div>
<div class="ws_bullets">
</div>
</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine4//wowslider.js"></script>
<script type="text/javascript" src="engine4//script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
CSS：
/* CSS Document */
body {
background-image:url(images/images/banner_repeat_01.jpg);
width:auto;
height:auto;
background-repeat:repeat-x;
}
footer {
background-color:#c3c3c3;
background-repeat:repeat-x;
background-position:bottom;
width:100%;
left:0;
right:0;
position:absolute;
}
#banner {
width:auto;
height:auto;
margin-left:auto;
margin-right:auto;
text-align:center;
color:white;
text-shadow: 2px 2px 5px #000;
font-family:"Times New Roman", Times, serif;
}
#schedule {
color:white;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:2.9em;
}
#slide_background {
background-color:#c3c3c3;
margin-left:auto;
margin-right:auto;
width:100%;
position:absolute;
left:0;
right:0;
}
#slides {
background-color:#000;
margin-left:auto;
margin-right:auto;
text-align:center;
height:13em;
width:70%;
margin-top:-1em;
color:white;
}
#frontpage {
margin-left:auto;
margin-right:auto;
width:100%;
color:#333;
margin-top:23em;
}
#banner hr {
width:15em;
margin-top:-1.8em
}
#frontpage table th {
color:#333;
border-collapse:collapse;
font-size:2em;
text-decoration:underline;
font-variant:small-caps;
}
#frontpage table td {
color:#161616;
border-collapse:collapse;
font-size:1.3em;
}
h1 {
font-size:2.8em;
margin-top:-.1em;
}
h3 {
font-variant:small-caps;
margin-top:-.2em;
letter-spacing:4px;
}
a:link {
text-decoration: none;
color:black;
}
a:visited {
text-decoration:none;
font-weight:bold;
color:black;
}
a:active {
text-decoration:underline;
color: #00F;
}
table a:hover {
text-decoration:underline;
font-weight:bold;
color:#33F;
}
a h3 {
color: #FFF;
text-decoration: none;
}
a h1 {
color: #FFF;
text-decoration: none;
}
table {
font-family:"Times New Roman", Times, serif;
font-size:1em;
margin-left:auto;
margin-right:auto;
letter-spacing:2px;
margin-top:-.5em;
}
td:nth-child(1) {
border-right:solid thin;
}
td:nth-child(2) {
border-right:solid thin;
}
td:nth-child(3) {
border-right:solid thin;
}
#frontpage td:nth-child(3) {
border-right:none;
}
.schedule_day {
font-weight:bold;
font-size:1.3em;
text-decoration:underline;
color:black;
font-variant:small-caps;
}
#banner a h1 {
text-decoration: none;
}
#wowslider-container4 {
zoom: 1;
position: relative;
max-width:960px;
margin:0px auto 0px;
z-index:90;
border:none;
text-align:left;
/* reset align=center */
font-size: 10px;
}
* html #wowslider-container4 {
width:960px
}
#wowslider-container4 .ws_images ul {
position:relative;
width: 10000%;
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}
#wowslider-container4 .ws_images ul li {
width:1%;
line-height:0;
/*opera*/
float:left;
font-size:0;
padding:0 0 0 0 !important;
margin:0 0 0 0 !important;
}
#wowslider-container4 .ws_images {
position: relative;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
}
#wowslider-container4 .ws_images a {
width:100%;
display:block;
color:transparent;
}
#wowslider-container4 img {
max-width: none !important;
}
#wowslider-container4 .ws_images img {
width:100%;
border:none 0;
max-width: none;
padding:0;
margin:0;
}
#wowslider-container4 a {
text-decoration: none;
outline: none;
border: none;
}
#wowslider-container4 .ws_bullets {
font-size: 0px;
float: left;
position:absolute;
z-index:70;
}
#wowslider-container4 .ws_bullets div {
position:relative;
float:left;
}
#wowslider-container4 .wsl {
display:none;
}
#wowslider-container4 sound, #wowslider-container4 object {
position:absolute;
}
#wowslider-container4 .ws_bullets {
padding: 9px;
}
#wowslider-container4 .ws_bullets a {
width:11px;
height:11px;
background: url(./bullet.png) left top;
float: left;
text-indent: -4000px;
position:relative;
margin-left:5px;
color:transparent;
}
#wowslider-container4 .ws_bullets a:hover {
background-position: 0 50%;
}
#wowslider-container4 .ws_bullets a.ws_selbull {
background-position: 0 100%;
}
#wowslider-container4 a.ws_next, #wowslider-container4 a.ws_prev {
position:absolute;
display:block;
top:50%;
margin-top:-2em;
z-index:60;
height: 4.5em;
width: 4.5em;
background-image: url(./arrows.png);
opacity: 0.8;
background-size: 200%;
}
#wowslider-container4 a.ws_next {
background-position: 100% 0;
right:2.1em;
}
#wowslider-container4 a.ws_prev {
left:2.1em;
background-position: 0 0;
}
#wowslider-container4 a.ws_next:hover {
opacity: 1;
}
#wowslider-container4 a.ws_prev:hover {
opacity: 1;
}
/*playpause*/
#wowslider-container4 .ws_playpause {
display:none;
width: 4.5em;
height: 4.5em;
position: absolute;
top: 50%;
left: 50%;
margin-left: -2em;
margin-top: -2em;
z-index: 59;
background-size: 100%;
}
#wowslider-container4:hover .ws_playpause {
display:block;
}
#wowslider-container4 .ws_pause {
background-image: url(./pause.png);
}
#wowslider-container4 .ws_play {
background-image: url(./play.png);
}
#wowslider-container4 .ws_pause:hover, #wowslider-container1 .ws_play:hover {
background-position: 100% 100% !important;
}
/* bottom center */
#wowslider-container4 .ws_bullets {
bottom: -26px;
left:862px;
}
#wowslider-container4 .ws_bullets div {
left:-50%;
}
#wowslider-container4 .ws-title {
position:absolute;
display:block;
bottom: 1.7em;
left: 0;
margin: 0.9em;
margin-left: 0;
margin-right: 0.9em;
padding:0.8em;
background:#FFFFFF;
color:#5D5D5D;
z-index: 50;
font-family:'Open Sans', Arial, Helvetica, sans-serif;
border-radius:0.5em;
-moz-border-radius:0 1em 1em 0;
border-radius:0 1em 1em 0;
opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
-moz-box-shadow: 0 0 0.2em #5D5D5D;
box-shadow: 0 0 0.2em #5D5D5D;
}
#wowslider-container4 .ws-title div {
padding-top:0.25em;
font-size: 1.4em;
}
#wowslider-container4 .ws-title span {
font-size: 1.8em;
}
#wowslider-container4 .ws_images ul {
animation: wsBasic 20s infinite;
-moz-animation: wsBasic 20s infinite;
-webkit-animation: wsBasic 20s infinite;
}
@keyframes wsBasic {
0% {
left:-0%
}
10% {
left:-0%
}
20% {
left:-100%
}
30% {
left:-100%
}
40% {
left:-200%
}
50% {
left:-200%
}
60% {
left:-300%
}
70% {
left:-300%
}
80% {
left:-400%
}
90% {
left:-400%
}
}
@-moz-keyframes wsBasic {
0% {
left:-0%
}
10% {
left:-0%
}
20% {
left:-100%
}
30% {
left:-100%
}
40% {
left:-200%
}
50% {
left:-200%
}
60% {
left:-300%
}
70% {
left:-300%
}
80% {
left:-400%
}
90% {
left:-400%
}
}
@-webkit-keyframes wsBasic {
0% {
left:-0%
}
10% {
left:-0%
}
20% {
left:-100%
}
30% {
left:-100%
}
40% {
left:-200%
}
50% {
left:-200%
}
60% {
left:-300%
}
70% {
left:-300%
}
80% {
left:-400%
}
90% {
left:-400%
}
}
#wowslider-container4 .ws_images img {
border-radius: 4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#wowslider-container4 .ws_effect img {
border-radius: 4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#wrap {
width: 100%;
/* Spans the width of the page */
height: 3.8em;
margin: 0;
/* Ensures there is no space between sides of the screen and the menu */
z-index: 99;
/* Makes sure that your menu remains on top of other page elements */
position: absolute;
background-color:#FFF;
left:-3px;
right:0;
top: 153px;
margin-left:auto;
margin-right:auto;
}
body {
width:100%;
height:100%;
}
.navbar {
height: .5em;
padding: 0;
margin-left: 40em;
margin-right: auto;
position: absolute;
/* Ensures that the menu doesn't affect other elements */
width: auto;
left: 0 top: 0px;
min-width:800px;
}
.navbar li {
height: 1.5em;
;
width: 10em;
/* Each menu item is 150px wide */
float:left;
text-align: center;
/* All text is placed in the center of the box */
list-style: none;
/* Removes the default styling (bullets) for the list */
font:"Times New Roman", Times, serif;
font-size:1em;
padding: 0;
margin:0;
border-left:thin solid #000;
border-right:thin solid #000;
}
.navbar a {
padding: 0;
/* Adds a padding on the top and bottom so the text appears centered vertically */
text-decoration: none;
/* Removes the default hyperlink styling. */
color: #000;
/* Text color is white */
display: block;
}
.navbar li ul {
display: none;
/* Hides the drop-down menu */
height: auto;
margin: 0;
/* Aligns drop-down box underneath the menu item */
}
.navbar li:hover ul {
display: block;
/* Displays the drop-down box when the menu item is hovered over */
border: none;
padding: .7em;
}
li:nth-child(1) {
border-right:solid thin;
}
li:nth-child(2) {
border-right:solid thin;
}
li:nth-child(3) {
border-right:solid thin;
}
li:nth-child(4) {
border-right:solid thin;
}
.navbar li ul li {
border:none;
background-color:#CCC;
border:thin solid #000;
padding:5px;
width:130px;
}
.navbar li ul li a:hover {
background-color: #CCC;
}
谢谢！
答案 0 :(得分：0)
将此添加到#wrap id
#wrap { text-align: center; }
并删除.navbar代码。粘贴这个
.navbar { display: inline-block; }
答案 1 :(得分：-1)
如果我理解你的话，那就是关于导航的中心问题？ 然后试试这些：
.navbar {
margin: 10px auto;
width: 800px;
}
使用导航栏UL设置固定。然后设置保证金：0自动。这意味着顶部和底部的0边距和左侧和右侧的自动边距=它将居中。 如果屏幕宽度超过800px，这将无法正常工作;）