html - CSS - 居中水平下拉导航

Question

我一直在寻找我的问题的答案，大多数人似乎都说使用“text-align: center;”和“显示:内联 block ”。但是，我仍然无法让我的下拉菜单以响应方式在页面上居中。我是编码新手，所以如果你能指出正确的方向，那就太棒了。

这是我的导航菜单的 HTML:

<nav>
        <ul id="nav">
        <li><a href="#">Skating</a>
                <ul class="skating">
                    <li><a href="#">Schedule</a></li>
                    <li><a href="#">Special Sessions</a></li>
                    <li><a href="#">Discount Coupons</a></li>
                    <li><a href="#">Skating Lessons</a></li>
                </ul></li>
           <li><a href="#">Party Info</a>
                <ul class="partyinfo">
                    <li><a href="#">Birthday Party</a></li>
                    <li><a href="#">Private Party</a></li>
                    <li><a href="#">Adult Skate Party</a></li>
                    <li><a href="#">Fundraisers</a></li>
                    <li><a href="#">Party Forms</a></li>
                </ul></li>
            <li><a href="#">Roller Hockey</a>
                <ul class="hockey">
                    <li><a href="#">7-10 Year Old</a></li>
                    <li><a href="#">11-14 Year Old</a></li>
                    <li><a href="#">League Information</a></li>
                </ul></li>
            <li><a href="#">About Us</a>
                <ul class="about">
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Directions</a></li>
                    <li><a href="#">Photo Gallery</a></li>
                </ul></li>
        </ul>
</nav>

这里是HTML文件对应的CSS文件

* {
margin: 0px;
padding: 0px;
}

header {
text-align: center;
}



ul#nav li {
width: 125px;
text-align: center;
position: relative;
margin-right:5px;
float: left;
line-height: 25px;
border-radius: 10px;
display: inline-block;
padding: 5px;
}

ul#nav a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #f3f3f3;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}

ul#nav, ul.skating, ul.partyinfo, ul.hockey, ul.about {
list-style-type: none;
display: inline-block;
text-align: center;
font-size: 1em;

}

ul#nav li:hover > a {
background-color: yellow;
}

ul#nav ul.skating, ul.partyinfo, ul.hockey, ul.about {
display:none;
}

ul#nav li:hover ul.skating {
display: block;
}

ul#nav li:hover ul.partyinfo {
display: block;
}

ul#nav li:hover ul.hockey {
display: block;
}

ul#nav li:hover ul.about {
display: block;
}


img.header {
float:right;
}

对于这个基本问题，我们深表歉意，但我们将不胜感激。如果您发现我的代码有任何其他问题，请随时告诉我，以便我继续改进。

谢谢。

Answer 1

这是基础知识。您需要在子菜单上使用绝对位置并将 text-align:center 应用于父级 ul

JSfiddle

HTML - 不变

CSS

* {
margin: 0px;
padding: 0px;
}

ul#nav {
 text-align: center;
 vertical-align:top;
}

ul#nav li {
width: 125px;
position: relative;
margin-right:5px;
line-height: 25px;
border-radius: 10px;
display: inline-block;
padding: 5px;
}

ul#nav a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #f3f3f3;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}

ul.skating, ul.partyinfo, ul.hockey, ul.about {
list-style-type: none;
display: inline-block;
text-align: center;
font-size: 1em;

position: absolute;
top:100%;

}

ul#nav li:hover > a {
background-color: yellow;
}

ul#nav ul.skating, ul.partyinfo, ul.hockey, ul.about {
display:none;
}

ul#nav li:hover ul.skating {
display: block;
}

ul#nav li:hover ul.partyinfo {
display: block;
}

ul#nav li:hover ul.hockey {
display: block;
}

ul#nav li:hover ul.about {
display: block;

您最好使用较少的 ID 标签并在子菜单上使用可重复使用的类。