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

问题描述

| 我有以下容器：

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

    

解决方法

        如果您试图将“ 3”个列表元素居中，请给容器

text-align: center

将工作。 如果是关于块元素的，那么@slhck和@anirudh的答案就是解决方案。     ,        我想以下应该做。分配一个固定的宽度，然后

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

您可以指定顶部和底部边距，但是左侧和右侧的

auto

值将使元素居中。 更新：之前没有看到您的代码。有关

inline

元素，请参见@Pekka的答案。     ,        使div为8ѭ，并为ѭ9and做

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