CSS/HTML 尝试将导航元素居中

Question

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

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

CSS和HTML如下：

       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 */
    }

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

谢谢！

Answer 1

添加这个

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

Fiddle

Answer 2

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

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

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

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 */
}

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

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

CSS/HTML 尝试将导航元素居中

CSS/HTML Trying to center nav ul element

html

css

html-lists

center

nav