如何使菜單居中？ CSS

Question

如何使菜單居中？ 當鼠標出現在菜單按鈕上時，我還希望顏色發生變化嗎？ 謝謝你的幫助。

 div.menu {
    list-style:none;
    margin:20px;
    padding:0;
    width:100% }
 div.menu ul{
    font-family: Verdana;
    font-size:14px;
    margin:0 auto;
    padding:0;}
    div.menu li{
    display:inline; }
 div.menu li a{
    text-decoration:none;
    padding:5px 0;
    width:100px;
    background:#FBB117;
    color:#4C4646;
    float:left;
    text-align:center;
    border-left:1px solid #fff; }

 div.menu lia:hover{
    background:#a2b3a1;
    color:#000 }

我工作得很好，但我改變了一些東西，它不再是中心了。 有點左側。 我找不到有什么不對。 能否請你幫忙？

 div.menu {
    list-style:none; 
    margin:0; 
    padding:0; 
    width:100%;
    text-align:center;} 
div.menu ul{
    font-family: Verdana;
    font-size:14px;
    margin:20px;
    padding:0;
    display:inline-block;}
 div.menu li{
    display:inline;}
 div.menu li a{
    text-decoration:none;
    padding:5px 0;
    width:100px;
    background:#FBB117;
    color:#4C4646;
    float:left;
    text-align:center;
    border-left:1px solid #fff; }
 div.menu li a:hover{
    background:#a2b3a1;
    color:#000 }

Answer 1

就像在這個樣本小提琴 。

1. 使用text-align:center在div上text-align:center ，並在列表中display:inline-block ，並將div的20px邊距移動到列表中。
2. 要在懸停時更改顏色：在li和a之間添加一個空格。

Answer 2

看看這些文章。 他們擁有您需要的一切：

• http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

要么

• http://matthewjamestaylor.com/blog/centered-dropdown-menus

Answer 3

使用自動邊距浮動菜單。

使用onmouseover事件更改按鈕上的顏色。

Answer 4

將您必須使用位置absolue和relative處理的任何div居中，或者以px，em或inch指定寬度，然后使用另一個div並使用％。 你可以說得更詳細點嗎？？？

Answer 5

我有一些CSS，我在大約一年前被撞在一起，我幾乎在我工作的每個項目上都可以使用它...隨意使用它。 要使用它，您需要做的就是像這樣設置列表樣式：

<ul id="mylist" class="linearlist center"><li>Link or something</li></ul>

這樣您就可以非常輕松地對齊菜單，而無需使用浮動和折疊容器問題來處理。 您可以選擇樣式類 - 中心，左，右，分隔符，內部，外部。 玩個游戲。 只需確保（a）你給它一個類“linearlist”並確保HTML中沒有空格是某些瀏覽器渲染它。

/*************************************
FLAT LIST LAYOUT

    This can be called into use using the following classes:

            required        : linearlist
            select either   : centre / left / right
            optional        : separators
            outers / inners : adds or removes outermost borders

    Example usage:

            eg 1:  <ul class="linearlist right separators">
            eg 2:  <ul class="linearlist centre separators">
            eg 3:  <ul class="linearlist left">

    Support:
            IE6 :   :first-child and :last-child pseudoclasses are not supported
                    .inners and .outers will not work
            IE7 :   :last-child pseudoclass is not supported
                    .outers will not work but .inners will
            Note browser-sniffing is required to make list items full height in IE6 and IE7

    Remember - you will need to remove whitespace between list items for true rendering.

*************************************/
ul.linearlist, .linearlist ul          {list-style-type: none; padding: 0; margin: 0;}
ul.linearlist li,.linearlist ul li     {display: inline-block; padding: 0; margin: 0;}
*ul.linearlist li,*.linearlist ul li   {display: inline !important;}
ul.linearlist li a,.linearlist ul li a {display: inline-block;}

ul.separators li,.separators ul li                         {border-left-width: 1px; border-left-style: solid;}
ul.inners li:first-child,.inners ul li:first-child {border-left-width: 0;} /* removes border from left-most list item  */
ul.outers,.outers ul {border-right-width: 1px; border-right-style: solid;} /* adds border to right-most list item  */

ul.centre,ul.center,.centre ul,.center ul {text-align: center;}
ul.left,.left ul                          {text-align: left;}
ul.right,.right ul                        {text-align: right;}

哦，是的，你的CSS中有一個小錯字，這將阻止鼠標懸停時的顏色變化...你的最后一個聲明應該是

div.menu li a:hover{
    background:#a2b3a1;
    color:#000 }

但是你可以稍微簡化它，因為嵌套這么多的選擇器是不好的做法......試試這個：

.menu a:hover{
    background:#a2b3a1;
    color:#000 }

Answer 6

看看這個JS小提琴

http://jsfiddle.net/7zk8E/

通過將text-align：center應用於外部div（您稱之為類菜單），可以使菜單居中。 我還將.menu ul顯示屬性更改為內聯塊，因為內聯元素不會獲得任何填充或邊距。

你的懸停不起作用的原因是你的CSS有一個拼寫錯誤的div.menu lia:hover

它應該是div.menu li a:hover

Answer 7

嘗試三個鏈接（33.3％寬度）： 示例

.menu {
    list-style:none;
    margin:0 auto;
    padding:0;
    width:100%;
}

.menu ul {
    font-family:Verdana;
    font-size:14px;
    padding:0;
    width:100%;
}

.menu li {
    float:left;
    width:33.3%; 
}

.menu a {
    text-decoration:none;
    background:#FBB117;
    color:#4C4646;
    float:left;
    width:100%;
    height:100%;
    text-align:center;
    border-left:1px solid #fff; 
}

.menu a:hover {
    background:#a2b3a1;
    color:#000; 
}

• 你不需要在任何這些樣式之前使用'div'選擇器，所以我把它們拿出來了。
• div.menu lia ：hover有一個錯字，應該是li a ：hover {}