使用文本對齊或內嵌塊居中導航欄？ （jekyll）

Question

我有困難集中我的導航欄。我試圖在某些不會導致任何成功的領域內用「內聯塊」替換「塊」。我也嘗試過「text-align：center」，但那不起作用。 我試過「文字對齊：」左，右和中心，但它根本不會改變。我在正確的位置尋找？ 其他一切都按照預期運作，所以我害怕觸摸任何東西。 這裏的jsfiddle.

#navbar ul li a, .dropdown-toggle { 
    color: white; 
    text-align: center; /*doesn't seem to do anything*/ 
    padding: 14px 16px; 
    text-decoration: none; 
    display: inline-block; 
} 

Answer 1

訣竅定心元件與text-align: center是雙重的：

1.聲明display: block和text-align: center含父元素
2.上聲明該嵌套子元素display: inline-block

如果的父元素是，則可以使用text-align: center這種方式將任何inline-block元素居中元素。

你將需要相應地調整你的風格：

#navbar ul:not(.dropdown-menu) { 
    float: none; 
    display: block; 
    text-align: center; 
} 

#navbar ul:not(.dropdown-menu) > li { 
    display: inline-block; 
    float: none; 
} 

一個重要的考慮因素，任何時候你需要對齊的元素是保持看出來float規則，他們將在對準否定任何企圖元素使用display規則。

小提琴示範： https://jsfiddle.net/kbuoL6sm/6/

Answer 2

在#navbar

嘗試margin: 0 auto;或者，在#navbar的父母嘗試text-align: center;

如果需要的東西多的是，CSS的技巧在這裏有一個很大的指導作用幾乎適用於所有情況：

https://css-tricks.com/centering-css-complete-guide/