我将如何在此div中将此ul水平居中？

Question

的jsfiddle

HTML

<div id="geometric-nav" class="left template-column cfix    template-column-2" sort_key="nav">

<div class="geometric-nav-wrap cfix" style="
">
  <ul id="geometric-nav-links" class="nav-links expandable">
    <!-- page links are appended to this element -->
  <li class="page page-896547 page-work" page_id="896547" nav-link="true" nav_link_tmpl="true" style="display: none;">

  <div class="nav-link-container">
  <a href="/896547/gallery" class="nav-link visited selected">Gallery</a></div></li><li class="page page-896549 page-custom first-child" page_id="896549" nav-link="true" nav_link_tmpl="true">

  <div class="nav-link-container">
  <a href="/896549/about" class="nav-link visited">About</a></div></li><li class="page page-896548 page-custom last-child" page_id="896548" nav-link="true" nav_link_tmpl="true">

  <div class="nav-link-container">
  <a href="/896548/contact" class="nav-link">Contact</a></div></li><li class="page page-896551 page-resume" page_id="896551" nav-link="true" nav_link_tmpl="true" style="display: none;">

  <div class="nav-link-container">
  <a href="/896551/resume" class="nav-link">Resume</a></div></li></ul>
</div> <!--#geometric-nav-wrap-->
</div>

CSS

#geometric-nav {
    background: #222;
    height: 40px;
    width: 100%;
    margin-top: 10px;
}

.template-column-2 #geometric-nav-links li {
    margin-left: 15px;
    float: left;
    list-style: none;
}

Answer 1

此解决方案将li项视为内联块元素，并使用ul容器将元素居中。

添加： text-align: center以＃geometric-nav为text-align: center

并display: inline-block到.template-column-2＃geometric-nav-links li

http://jsfiddle.net/gZB6Y/

谷歌会帮助你;）

Answer 2

您可以使用：table; ul并将margin重置为auto； 它会缩小内容并居中：

.template-column-2 #geometric-nav-links {
    display:table;
    margin:auto;
}

DEMO

---

或将display:inline-block为li并将text-align:center为ul

演示2

.template-column-2 #geometric-nav-links li {
    margin-left: 15px;
    display:inline-block;
    list-style: none;
}
.template-column-2 #geometric-nav-links {
    text-align:center;
}

---

或将display:inline-block为ul ，将text-align:center为#geometric-nav 。

演示3

#geometric-nav {
    background: #222;
    height: 40px;
    width: 100%;
    margin-top: 10px;
    text-align:center;
}
.template-column-2 #geometric-nav-links li {
    margin-left: 15px;
    float: left;
    list-style: none;
}
.template-column-2 #geometric-nav-links {
    display:inline-block;
}