如何將一個元素相對於它的父元素居中？

我有以下容器：如何將一個元素相對於它的父元素居中？

#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

如何將一個元素相對於它的父元素居中？

回答

相關問題