Question

我只是在试图练习jsfiddle，我遇到了一个我无法解决的问题。所以希望你们中的一些人可以在这里帮助我一点。对于CSS的基础知识来说，这似乎是一个如此愚蠢的问题，但出于某种原因，这个问题让我有了。

基本上我在jsfiddle上创建了一个通用导航，我需要以ul元素为中心。我不确定为什么他们会卡在屏幕的左侧。

CSS和HTML如下：

＆＃13;

       body {
        background-color: #45859E;
        font-family:'Open Sans', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        margin: 0;
        padding: 0;
    }
    ul {
        padding: 0;
        margin: 0 auto;
    }
    a:link {
        text-decoration: none;
    }
    h3 {
        padding: 5px;
        margin: 0;
    }
    header {
        width: 100%;
        background-color: #FFF;
        margin: 0 auto;
        border-bottom: solid 5px #00729B;
    }
    #nav {
        margin: 0 auto;
        padding: 10px 0;
    }
    #nav ul {
        width: 100%;
        margin: 0 auto;
    }
    #nav ul li {
        text-align: center;
        width: 100px;
        display: inline-block;
        border-bottom: solid 5px #00729B;
        color: #000 border-radius: 50px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        margin: 0 auto;
    }
    ul li h3 {
        text-transform: uppercase;
    }
    ul li:hover {
        color: #999999;
        border-color: #00729B;
        background: #ffffff;
        /* Old browsers */
        background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(78%, #ffffff), color-stop(78%, #ffffff), color-stop(100%, #00729b));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);
        /* IE10+ */
        background: linear-gradient(to bottom, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);
        /* W3C */
    }

＆＃13;

<body>
    <header>
        <div id="nav">
            <ul>
                <li id="one">
                     <h3><a href="">Home</a></h3>
    
                </li>
                <li>
                    <h3><a href="">About</a></h3>
    
                </li>
                <li>
                     <h3><a href="">Contact</a></h3>
    
                </li>
            </ul>
        </div>
    </header>
    </body>

＆＃13;

谢谢！

Answer 1

添加此

ul {
padding: 0;
margin: 0 auto;
text-align:center; 
}

Fiddle

Answer 2

这个简单的解决方案只需将text-align: center添加到ul和display: inlin-block for li

＆＃13;

ul li {
    color: #000
}
ul {
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
}
ul li  {
    display: inline-block;
    padding: 10px;
}

＆＃13;

<ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
</ul>

＆＃13;

Answer 3

添加以下代码行将解决您的问题

#nav ul {
    text-align: center;
}

http://jsfiddle.net/1qyw86cv/

Answer 4

您的代码没问题。你忘了做的唯一事情是你不要在ul.so的中心对齐文本，只需添加：text-align:center;的样式为ul。

Answer 5

设置

#nav ul {
    display: table;
    /* width: 100%; <- remove this */
}

您的代码作为工作小提琴（:hover样式除外）：

http://jsfiddle.net/ker1jLdf/6/

CSS / HTML试图使nav ul元素居中

5 个答案: