如何居中 <UL> 在清单中

Question

I've got an issue that I can't resolve.

I have a list of lists, like this one:

<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>

with this 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;
}

My problem is: Item 1 list and Item 2 list are not in the center of my page, they are left-oriented.

I've tried with the center parameter and with the float, without success.

Any suggestion?

You can find a fiddle here: Link

Answer 1

you have to set the width of the #nav to the right value (corresponding to the width of the content). change your example to the following value and the two menus will be centered on the page.

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

updated jsFiddle: http://jsfiddle.net/F9Wrb/17/

and just to increase cross-browser compatibility, add the following CSS to the parent node of your #nav:

body {
    text-align: center;
}

Answer 2

Here is your solution. I have just changed these two styles. FYI, unless you are using html5, you cannot put div inside <a> tag; it's invalid.

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

Answer 3

You might want to read about the basics of CSS page centering and page layouts.

Normally, you'd have a "container" <div> that contains the entire page and defines the layout and boundaries of the page. You can call it anything (not necessarily container )

Now, you need to decide what layout fits you best, most commonly used layout sizes can vary anywhere between 960px to 1200px .

general styling for your container would be,

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

This ensures your page is centered almost always. You would want to use some kind of a CSS Reset to ensure you reset browser defaults

Answer 4

Three possible solutions:

1. Using absolute positioning and a negative left margin:

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

   Demo 1

2. Using auto margins with ul width specified:

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

   Demo 2

3. If you want to use the auto-margin solution and don't want to specify the ul width, declare the LIs as display: inline-block (instead of floating them). This works because the LIs will now be in the page flow instead of out of it, as they are when floated. Answer courtesy of Kashif Raza.

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

   Demo 3

Answer 5

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

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

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

Make these changes in your CSS and lists will be in the center of your page.

Answer 6

Just put a width on the surrounding div, then change that to margin:0 auto, which will center it in the page.

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

And the html, rather than float="center"

<div class="center">    

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

As mentioned, there is no such thing as float="center" , or for that matter, float:center; ! For advanced positioning of elements, I'd recommend using a CSS framework such as zurb foundation or Gridpak.com

Answer 7

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

div align="center"