在div內水平居中的正確方法是什麼？

我對HTML/CSS比較新，所以請隨時糾正我（可能）犯的任何其他錯誤。這是我的HTML和CSS：http://jsfiddle.net/luxurymode/PrjJ3/3/在div內水平居中的正確方法是什麼？

我想要做的就是在該「navbar」中水平居中UL。什麼是正確的方法呢？

編輯：我不小心張貼錯誤的小提琴。現在是正確的......

來源

2012-02-27 LuxuryMode

有很多方法可以達到這個效果。「適當」和「正確」對你來說意味着什麼？ – 2012-02-27 21:18:35

讓你的li元素在同一行中的更好的方法是將它們添加到display：inline，remove float：left，並從鏈接中移除display：block。 – abresas 2012-02-27 21:32:52

Thanks @abresas！ – LuxuryMode 2012-02-27 21:34:51

正確的方法是

#topbar ul { 
    width: /* exact width of the ul */; 
    margin: 0 auto; 
}

DEMO

另一種方式是

#topbar { 
    text-align: center; 
} 

#topbar ul { 
    display: inline-block;  
}

但inline-block不是100％×瀏覽器證明。

DEMO

來源

2012-02-27 21:18:50 paislee

如果它們的寬度可以是動態的呢？我知道很多情況下，我不能在這樣的寬度或菜單中進行硬編碼。 – 2012-02-27 21:24:52

謝謝！垂直方向如何？一旦我添加了邊距0自動，垂直居中似乎已消失。 http://jsfiddle.net/luxurymode/PrjJ3/9/ – LuxuryMode 2012-02-27 21:25:13

豎起大拇指提供雙方paislee。 – 2012-02-27 21:29:35

一個簡單的方法將是給列表中的寬度和邊距設置爲0汽車：

#topbar ul { 
    list-style-type: none; 
    margin:0 auto; 
    width:300px 
}

來源

2012-02-27 21:21:24 j08691

如果你將永遠知道你的UL值，然後使用第一對夫婦答案中的例子。如果你不知道寬度是多少，你必須使用稍微不同的方法。將您的禮品卡上的float:left;更改爲display:inline;，然後將text-align:center;添加到您的卡里。

來源

2012-02-27 21:28:05

第一：對於瀏覽器兼容性（IE & FF）與內聯塊，使用：

display:-moz-inline-stack; 
display:inline-block; 
zoom:1; 
*display:inline;

所以在#nav裏，除去浮動：左，使其：

#nav li { 
    display:-moz-inline-stack; 
    display:inline-block; 
    zoom:1; 
    *display:inline; 
    border-right: 1px solid #fff; 
    box-shadow: 1px 0 0 rgba(255, 255,255, 0.1); 
}

然後以您爲中心導航

#nav { 
    padding: .5em; 
    height: 55px; 
    width: 650px; 
    background-color: #325A8C; 
    text-align: center; 

}

來源

2012-02-27 21:39:12

在div內水平居中的正確方法是什麼？

回答

相關問題