html - 如何居中
在一个列表中

Question

我有一个我无法解决的问题。

我有一个列表列表，如下所示：

<ul id="nav">
    <li>
        <div  class="tabquad">
            Item 1
        </div>

        <ul>
            <li>
                <a class="item" href="index.jsp?quad=1">
                    <div  class="tabquad">
                        1.1
                    </div>
                </a>
            </li>
            <li>
                <a class="item" href="index.jsp?quad=2">
                    <div  class="tabquad">
                        1.2
                    </div>
                </a>
            </li>
            <li>
                <a class="item" href="index.jsp?quad=3">
                    <div  class="tabquad">
                        1.3
                    </div>
                </a>
            </li>
        </ul>
    </li>
    <li>
        <div  class="tabquad">
            Item 2
        </div>

        <ul>
            <li>
                <a class="item" href="index.jsp?quad=7">
                    <div  class="tabquad">
                        2.1
                    </div>
                </a>
            </li>
            <li>
                <a class="item" href="index.jsp?quad=8">
                    <div  class="tabquad">
                        2.2
                    </div>
                </a>
            </li>
            <li>
                <a class="item" href="index.jsp?quad=9">
                    <div  class="tabquad">
                        2.3
                    </div>
                </a>
            </li>
            <li>
                <a class="item" href="index.jsp?quad=10">
                    <div  class="tabquad">
                        2.4
                    </div>
                </a>
            </li>
            <li>
                <a class="item" href="index.jsp?quad=11">
                    <div  class="tabquad">
                        2.5
                    </div>
                </a>
            </li>
        </ul>
    </li>
</ul>

使用这个 CSS：

#nav, #nav ul {
    padding: 0;
    margin: 0 auto;
    list-style: none;
}

#nav {
    width: 45em;
    margin: 0 auto;
}

#nav a {
    display: block;
    width: 15em;
}

#nav li {
    float: left;
    width: 15em;
}
#nav li ul {
    position: absolute;
    width: 15em;
    left: -500em;
}

#nav li:hover ul {
    left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
}
.item{
    color:#0E4063;
    text-decoration:none;
}
.tabquad{
    color:white;
    margin:auto;
    position:relative;
    border:1px solid #000;
    border-color:rgb(82,115,154);
    width:200px;
    height:30px;
    text-align:center;
    padding-top:10px;
    top:25px;
    background-color:rgb(0,56,130);
}
    .tabquad:hover{
    background-color:rgb(49,87,132);
    cursor: hand;
}

我的问题是：第 1 项列表和第 2 项列表不在我的页面中心，它们是左向的。

我试过使用中心参数和浮点数，但没有成功。

有什么建议吗？

你可以在这里找到一个小提琴：链接

score 4 · Accepted Answer

您必须将#nav 的宽度设置为正确的值（对应于内容的宽度）。将您的示例更改为以下值，两个菜单将位于页面中心。

#nav {
    width: 30em;
    margin: 0 auto;
}

更新 jsFiddle：http: //jsfiddle.net/F9Wrb/17/

并且只是为了增加跨浏览器兼容性，将以下 CSS 添加到 #nav 的父节点：

body {
    text-align: center;
}

score 0 · Accepted Answer

三种可能的解决方案：

使用绝对定位和负左边距：

#nav {
    position: absolute;
    left: 50%;
    margin: 0 0 0 -15em;
}

演示 1

使用指定 ul 宽度的自动边距：
```
#nav {
    width: 30em;
    margin: 0 auto;
}
```
演示 2
如果您想使用自动边距解决方案并且不想指定 ul 宽度，请将 LI 声明为display: inline-block（而不是浮动它们）。这是有效的，因为 LI 现在将在页面流中而不是在页面流中，就像它们在浮动时一样。回答由 Kashif Raza 提供。
```
#nav {
    margin: 0 auto;
}
#nav > li {
    display: inline-block;
    width: 15em;
}
```
演示 3

score 0 · Accepted Answer

这是您的解决方案。我刚刚改变了这两种风格。仅供参考，除非您使用的是 html5，否则您不能放入div标签<a>；这是无效的。

#nav, #nav ul {
    padding: 0;
    margin: 0 auto;
    list-style: none;
    text-align:center
}
#nav li {
    width: 15em;
    display:inline-block;
}

score 0 · Accepted Answer

您可能想了解 CSS 页面居中和页面布局的基础知识。

通常，您会有一个<div>包含整个页面并定义页面布局和边界的“容器”。你可以叫它任何东西（不一定container）

现在，您需要决定哪种布局最适合您，最常用的布局尺寸可以960px在1200px.

您的容器的一般样式是，

.container{
    width:960px; //<-- this can be anything, based on your layout.
    margin:0 auto;
}

这可以确保您的页面几乎总是居中。您可能希望使用某种CSS Reset来确保您重置浏览器默认值

score -1 · Accepted Answer

#nav a {
    display: block;
    width: 15em;
    margin:auto;
}

#nav>li {
    width:50% !important;
}

#nav li:hover ul {
    position:relative;
    left: auto;
}

在您的 CSS 中进行这些更改，列表将位于页面的中心。

score -2 · Accepted Answer

只需在周围的 div 上设置一个宽度，然后将其更改为 margin:0 auto，它将在页面中居中。

.center{
    width:400px;
    margin:0 auto;
}

和 html，而不是 float="center"

<div class="center">

http://jsfiddle.net/F9Wrb/12/

如前所述，没有这样的东西float="center"，或就此而言，float:center;！对于元素的高级定位，我建议使用 CSS 框架，例如zurb Foundation或Gridpak.com

score -3 · Accepted Answer

-3

把它放在你想要居中的位置：

div align="center"

于 2013-06-20T10:22:23.233 回答

html - 如何居中在一个列表中

7 回答 7

Related

Reference

html - 如何居中
在一个列表中