我无法让菜单居中。我有中心的图像等，但我无法将菜单置于中心位置。
以下是与该菜单相关的网站的一些CSS：
@charset "UTF-8";
/* CSS Document */
#nav {
width:975px; /* six main menu buttons at 150px per */
margin:1 auto; /* Based on a suggestion from stackoverflow */
list-style-type:none;
text-align:center;
position: fixed; /* used to render menu bar on top */
top: 0; /* used to render menu bar on top */
z-index: 1000; /* use z-index to render menu bar on top of everything, even the slideshow */
display:inline-block;
}
#nav li {
display:inline-block; /* used to wrap text */
position:relative;
float:left;
background-color: #BDB76B; /* menu background color */;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
}
#nav li:hover { /* highlights current hovered list item when hovering over the parent menu */
background-color:#BDB76B;
font-weight:500;
color:blue;
}
#nav li a {
display:inline-block; /* used to wrap text */
margin:5px 0; /*space between menu elements */
text-decoration:none;
width:150px; /* this is the width of the menu items */
line-height:15px; /* this is the text height of the menu items */
color:#000000; /* list item font color 000=black, FFF=white*/
}
#nav li a:hover { /* highlights hovered item of the parent menu */
background-color:#BDB76B;
font-weight:500;
color:blue;
font-size:18px;
width:225px;
}
#nav li li a { /* smaller font size for sub menu items */
font-size:90%;
background-color: #BDB76B; /* menu background color for submenues */
}
#nav li li a:hover { /* highlights current hovered list when hovering over sub menues */
background-color:#BDB76B;
font-weight:500;
color:blue;
font-size:120%;
width:200px;
}
/*--- Sublist Styles ---*/
#nav ul {
position:absolute;
padding:0;
left:0;
display:none; /* hides sublists */
}
#nav li:hover ul ul {
display:none;
} /* hides sub-sublists */
#nav li:hover ul {
display:block;
} /* shows sublist on hover */
#nav li:hover ul ul ul {
display:none;
} /* hides sub-sub-sublists */
#nav li li:hover ul {
display:block; /* shows sub-sublist on hover */
margin-left:150px; /* this should be the same width as the parent list item */
margin-top:-35px; /* aligns top of sub menu with top of list item */
}
#nav li li li:hover ul {
display:block; /* shows sub-sub-sublist on hover */
margin-left:150px; /* this should be the same width as the parent list item */
margin-top:-35px; /* aligns top of sub menu with top of list item */
width:200px;
}
.upcoming_events_list li { /* attributes for the upcoming_events list level */
/* CSS to alter the links in the include list when inside the div */
width: 380px;
text-align: left;
list-style-type:circle;
color:blue;
}
.upcoming_events_list li a:link { /* attributes for the upcoming_events unvisited */
font-family: "Times New Roman", Times, serif;
color: black;
font-size: 18px;
font-weight: 300;
list-style-type: circle;
}
.upcoming_events_list li a:visited { /* attributes for the upcoming_events visited */
font-family: "Times New Roman", Times, serif;
color: blue;
font-size: 18px;
font-weight: 100;
list-style-type: circle;
}
.upcoming_events_list li a:hover { /* attributes for the upcoming_events hover */
font-family: "Times New Roman", Times, serif;
font-size: 20px;
font-weight: 500;
}
.upcoming_events_list li a:active { /* attributes for the upcoming_events selected */
font-family: "Times New Roman", Times, serif;
font-size: 20px;
font-weight: 500;
text-decoration: underline;
}
此处是网站index.shtml的一部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/ss_template_1.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="Page_Specific_Title" -->
<title>My Site Home Page SHTML</title>
<!-- InstanceEndEditable -->
<link href="CSS/MySite.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #EEE8AA;
}
-->
</style>
<!-- InstanceBeginEditable name="Page_Specific_Head" -->
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'shuffle', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 1500, // speed at which the transition occurs (in miliseconds)
delay: 1000, // time spent on the first slide before starting the slideshow
continuous: 0, // true (1) to start next transition immediately after current one completes
timeout: 9000 // time spent on each slide
});
});
</script>
<style type="text/css">
<!--
p {margin:0; padding:0}
-->
</style>
<meta name="description" content="A warm welcome to all. We invite everyone to participate in all aspects of our
parish life."/>
<meta name="keywords" content="parish,church,welcome,all are welcome,spiritual,peace,justice"/>
<!-- InstanceEndEditable -->
</head>
<body>
<!-- InstanceBeginEditable name="Page_Specific_Body" -->
<br />
<div>
<?php include("menu_primary1.shtml");
?>
</div>
<div class="block_center_1000_text_left">
<!-- The title was created using the Pristina Regular 36 point font. The background color code is D3AC25-->
<p align="center">
<img src="images/front_page_title.jpg" alt="Parish Site"/>
</p>
</div>
<div class="outer_width_1000" >
</div>
</body>
这里是包含文件menu_primary1.shtml的一个子集：
<ul id="nav">
<li><a href="#">Faith Formation</a>
<ul>
<li><a href="adult_faith_formation.shtml">Adult Faith Formation</a></li>
<li><a href="Attachments/RelEdGrades1to5Schedule.pdf" target="_blank">Youth Faith Formation Grades 1 to 5</a></li>
<li><a href="Attachments/RelEdGrades6to8Schedule.pdf" target="_blank">Youth Faith Formation Grades 6 to 8</a></li>
<li><a href="Attachments/ConfirmationPreparation.pdf" target="_blank">Confirmation Preparation</a></li>
</ul>
</li>
<li><a href="#">Parish Groups</a>
<ul>
<li><a href="Attachments/ChurchGroupsListing.pdf" target="_blank">Listing of Groups and Ministries</a></li>
<li><a href="good_art_series.shtml">Good Art Series</a></li>
<li><a href="contact_us.shtml#peace">Peace and Justice Outreach</a></li>
<li><a href="svdp.shtml">Saint Vincent de Paul</a></li>
</ul>
</li>
<li><a href="#">Upcoming Events</a>
<?php include("menu_upcoming_events1.shtml");
?>
</li>
... Three other top-level <li> menu items
</ul>
感谢您的帮助。
答案 0 :(得分：7)
如果您将任何元素或菜单项置于中心，则必须遵循以下两个步骤：
SETP1：
ul{
width: 100%;
display: table;
text-align: center;
}
步骤2：
ul li{
display: inline-block;
float: none;
}
并完成了。现在，它自己尝试一下。
答案 1 :(得分：1)
* {
margin: 0;
padding: 0;
}
.wrapper {
padding-top: 10px;
width: 400px;
margin: 0 auto;
overflow: hidden;
}
.menu {
background: #093;
}
.menu ul {
margin-left: 0;
list-style: none;
text-align: center;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
display: block;
padding: 10px;
color: #CC0;
text-decoration: none;
}
.menu ul li a:hover {
background: #C30;
color: #FFF;
}<div class="wrapper">
<div class="menu">
<ul>
<li><a href="">Home</a>
</li>
<li><a href="">Home</a>
</li>
<li><a href="">Home</a>
</li>
<li><a href="">Home</a>
</li>
</ul>
</div>
</div>
答案 2 :(得分：0)
我没有看过你的代码，但是http://howtocenterincss.com可能会让你的生活变得更加快乐：）
答案 3 :(得分：0)
作为替代方案，这可以使用flexbox完成。确保根据需要使用您的供应商前缀（本示例中未包含）。我更喜欢这种方法，因为不需要包装器。
.menu {
}
.menu ul {
display: inline-flex;
align-items: center;
justify-content: center;
list-style: none;
width: 500px; /* whatever width you want can be 100% */
}
.menu ul > li {
display: inline-block;
padding: 20px;
}<div class="menu">
<ul>
<li><a href="">Home</a>
</li>
<li><a href="">Home</a>
</li>
<li><a href="">Home</a>
</li>
<li><a href="">Home</a>
</li>
</ul>
</div>