Question

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

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

http://jsfiddle.net/gZB6Y/

谷歌会帮助你;）

Answer 2

你可以使用：table;用于ul和重置边距为auto;它将缩小它的内容，并将集中：

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

<强> DEMO

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

<强> DEMO 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。

<强> DEMO 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;
}

我如何在这个div中横向居中这个ul？

2 个答案: