如何居中 <UL> 在清單中

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列表不在我頁面的中心，它們是朝左的。

我嘗試使用center參數和float進行操作，但均未成功。

有什么建議嗎？

您可以在這里找到小提琴： 鏈接

Answer 1

您必須將#nav的寬度設置為正確的值（與內容的寬度相對應）。 將您的示例更改為以下值，這兩個菜單將在頁面上居中。

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

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

只是為了提高跨瀏覽器的兼容性，請將以下CSS添加到#nav的父節點中：

body {
    text-align: center;
}

Answer 2

這是您的解決方案。 我剛剛更改了這兩種樣式。 僅供參考，除非您使用的是html5，否則不能將div放在<a>標記內； 這是無效的。

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

Answer 3

您可能需要閱讀CSS頁面居中和頁面布局的基礎知識。

通常，您將有一個“容器” <div> ，它包含整個頁面並定義頁面的布局和邊界。 您可以將其命名為任何東西（不一定是container ）

現在，您需要確定哪種布局最適合您，最常用的布局大小可以在960px至1200px之間變化。

您的容器的一般樣式是

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

這樣可以確保您的頁面幾乎始終居中。 您可能想使用某種CSS重置來確保重置瀏覽器默認值

Answer 4

三種可能的解決方案：

1. 使用絕對定位和負的左邊距：

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

   演示1

2. 使用指定了ul寬度的自動頁邊距：

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

   演示2

3. 如果要使用自動邊距解決方案，並且不想指定ul寬度，則將LI聲明為display: inline-block （而不是浮動它們）。 之所以可行，是因為LIs現在將在頁面流中而不是從頁面流中移出，就像它們在浮動時一樣。 回答由Kashif Raza提供。

    #nav { margin: 0 auto; } #nav > li { display: inline-block; width: 15em; } 

   演示3

Answer 5

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

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

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

在CSS中進行這些更改，列表將位於頁面的中心。

Answer 6

只需在周圍的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

Answer 7

將此放置在您要居中的位置：

div align="center"