<li><a href="#">教区团体</a><ul><li><a href="Attachments/ChurchGroupsListing.pdf" target="_blank">团体和事工列表</a></li><li><a href="good_art_series.shtml">Good Art Series</a></li><li><a href="contact_us.shtml#peace">和平与正义外展</a></li><li><a href="svdp.shtml">Saint Vincent de Paul</a></li><li><a href="#">即将举行的活动</a><?php include("menu_upcoming_events1.shtml");?>... 其他三个顶级
;菜单项
感谢您的帮助.
解决方案
如果您将任何元素或菜单项居中，您必须遵循 2 个步骤:
setp1:
ul{宽度:100%；显示:表；文本对齐:居中；}
步骤 2:
ul li{显示:内联块；浮动:无；}
完成.就是这样，现在自己尝试一下.
I can't get a menu to be centered. I have images, etc. that center just fine, but I can't center the menu.
Here's some of the site's CSS that pertains to the menu:
@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;
}
Here's a subset of the site's 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>
and here's a subset of the included file 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>
Thanks for your help.
解决方案
if you center any element or menu item you have to follow 2 steps:
