如何将一个元素相对于它的父元素居中？

我有以下容器：如何将一个元素相对于它的父元素居中？

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

它是使用漂亮的生成：布局的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; 
}

来源

2011-06-11 Geo

你想要居中什么样的元素？你能展示一些HTML吗？ – 2011-06-11 21:19:39

您可以显示** HTML **而不是Ruby吗？查看源代码，也许？ – 2011-06-11 21:23:41

这只是一个div，有一个ul和一堆li。这是一个导航菜单。 – Geo 2011-06-11 21:25:23

请与id="container"股利，有class="container"类，做

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

来源

2011-06-11 21:21:02

我想下面应该做的。指定一个固定的宽度，然后

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

您可以指定顶部和底部边缘，但为auto值左右就会使元素居中。

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

来源

2011-06-11 21:21:37 slhck

如果你试图居中display: inline列表元素，给人的容器

text-align: center

会工作。

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

来源

2011-06-11 21:24:01

但文本对齐：中心是以页面为中心。我也尝试过。 – Geo 2011-06-11 21:26:58

@Geo：从我所看到的，'text-align：center'应该可以工作。你可以添加你的（相关的）完整的HTML（从View Source获得，而不是Ruby版本）和CSS到[jsFiddle demo]（http://jsfiddle.net/）？ – thirtydot 2011-06-11 21:35:38

是的，这里是：http://jsfiddle.net/zW2vW/1/。我还在application.css开始和style.css开始的位置添加了注释。 – Geo 2011-06-11 21:43:11

如何将一个元素相对于它的父元素居中？

回答

相关问题