css - 如何使元素相对于其父元素居中？

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

Answer 1

如果您试图将 display: inline 列表元素居中，给容器

text-align: center

会起作用。

如果是关于 block 元素，@slhck 和@anirudh 的答案就是解决方案。