如何使一个元素相对于其父元素居中显示？

Question

我有以下容器：

#container {
  width: 75%;
  margin: 0 auto;
  background-color: #FFF;
  padding: 20px 40px;
  border: solid 1px black;
  margin-top: 20px;
}

使用nifty:layout Rails生成器生成的。如何将东西居中放置在此容器内，而不是整个页面中？

编辑：抱歉没有提供更多信息:)。我想要居中的是：

<div id="nav">
    <ul>
        <% if current_user %>
            <li><%= link_to "Sign out",destroy_user_session_path %><span>|</span></li>
            <li><%= link_to "New snippet",new_snippet_path %><span>|</span></li>
        <% else %>
            <li><%= link_to "Login",new_user_session_path %><span>|</span></li>
            <li><%= link_to "Register",new_user_registration_path %><span>|</span></li>
        <% end %>
        <li><%= link_to "Snippets",snippets_path %><span>|</span></li>
        <li><%= link_to "Chat",messages_path %></li>
    </ul>
</div>

这是我目前为止编写的CSS：

#nav {
    list-style-type:none;
    padding:0;
    margin:0;
}

#nav li {
    display:inline;
}

- Geo

---

你想要居中哪种元素？能否展示一些HTML代码？ - Pekka

你能展示HTML而不是Ruby吗？查看源代码，也许？ - David Thomas

这只是一个带有ul和一堆li的div。它是一个导航菜单。 - Geo

Answer 1

如果您想要将display:inline的列表元素居中，您可以给容器添加以下样式：

text-align: center

会起作用。

如果涉及块元素，@slhck和@anirudh的答案是解决方案。

- Pekka

---

但是text-align:center是居中到页面的。我也试过了。 - Geo

@Geo：从我所看到的，text-align: center 应该是有效的。你能否将你（相关的）完整 HTML（从“查看源代码”中获取，而不是 Ruby 版本）和 CSS 添加到 jsFiddle 演示 中？ - thirtydot

是的，这里它是：http://jsfiddle.net/zW2vW/1/。我还添加了注释，指出application.css和style.css的开始位置。 - Geo

@Geo 这段代码看起来很好。它将导航元素相对于页面居中，但也相对于容器元素居中。 - Pekka

Answer 2

我想以下内容应该可以满足要求。先分配一个固定的宽度，然后...

#inside-container {
  margin-left: auto;
  margin-right: auto;
  width: 50px;
}

你可以指定上下边距，但是左右的auto值将使元素居中。

更新：之前没有看到你的代码。对于inline元素，请参见@Pekka的答案。

- slhck

Answer 3

让具有id="container"的

元素，拥有class="container"类，并执行相关操作。

.container #innerElement {
 position: relative;      
 width: <set width here>;
 margin: auto;
 }

- Anirudh Ramanathan