Html CSS如何将菜单居中
我无法使菜单居中。我有图像等，中心很好，但我不能中心菜单 以下是一些与菜单相关的网站CSS：Html CSS如何将菜单居中,html,css,menu,center,Html,Css,Menu,Center,我无法使菜单居中。我有图像等，中心很好，但我不能中心菜单 以下是一些与菜单相关的网站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;
@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;
}
<!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>
<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； 填充：0； } .包装纸{ 填充顶部：10px； 宽度：400px； 保证金：0自动； 溢出：隐藏； } .菜单{ 背景：093； } .菜单ul{ 左边距：0； 列表样式：无； 文本对齐：居中； } 李先生{ 显示：内联块； } .菜单ul li a{ 显示：块； 填充：10px； 颜色：CC0； 文字装饰：无； } .菜单ul li a：悬停{ 背景：C30； 颜色：FFF； } * { 保证金：0； 填充：0； } .包装纸{ 填充顶部：10px； 宽度：400px； 保证金：0自动； 溢出：隐藏； } .菜单{ 背景：093； } .菜单ul{ 左边距：0； 列表样式：无； 文本对齐：居中； } 李先生{ 显示：内联块； } .菜单ul li a{ 显示：块； 填充：10px； 颜色：CC0； 文字装饰：无； } .菜单ul li a：悬停{ 背景：C30； 颜色：FFF； }
如果将任何元素或菜单项居中，则必须遵循两个步骤： setp1：
ul{
width: 100%;
display: table;
text-align: center;
}
ul li{
display: inline-block;
float: none;
}
完成了。现在您可以自己尝试了。如果您将任何元素或菜单项居中，则必须遵循两个步骤： setp1：
ul{
width: 100%;
display: table;
text-align: center;
}
ul li{
display: inline-block;
float: none;
}
完成了。就这样，现在自己试试。也可以用flexbox完成。确保使用本示例中未包含的所需供应商前缀。我更喜欢这种方法，因为不需要包装器 .菜单{ } .菜单ul{ 显示：内联flex； 对齐项目：居中； 证明内容：中心； 列表样式：无； 宽度：500px；/*您想要的任何宽度都可以是100%*/ } .菜单ul>li{ 显示：内联块； 填充：20px； }
另一种方法是使用flexbox。确保使用本示例中未包含的所需供应商前缀。我更喜欢这种方法，因为不需要包装器 .菜单{ } .菜单ul{ 显示：内联flex； 对齐项目：居中； 证明内容：中心； 列表样式：无； 宽度：500px；/*您想要的任何宽度都可以是100%*/ } .菜单ul>li{ 显示：内联块； 填充：20px； }
谢谢我听从了他们的建议，把保证金放在左边：自动；和右边距：自动；我不知道你在那个网站上选择了什么选项，但大多数时候它会告诉你使用display:flex。你可能想调查一下。这是一个非常有用的网站。谢谢。我听从了他们的建议，把保证金放在左边：自动；和右边距：自动；我不知道你在那个网站上选择了什么选项，但大多数时候它会告诉你使用display:flex。你可能想调查一下。这是一个非常有用的网站。谢谢。成功了。我把前两个CSS类改为：谢谢。成功了。我将前两个CSS类更改为：