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

会奏效。

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

Answer 2

我想以下应该这样做。指定固定宽度，然后

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

您可以指定上边距和下边距，但左右auto值会使元素居中。

更新：之前没有看到您的代码。请参阅@ Pekka对inline元素的回答。

Answer 3

使用id="container"创建div，拥有class="container"类并执行

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

如何将元素相对于其父元素居中？

3 个答案: