如何居中該菜單？

我該如何中心this CSS menu？當我縮小時，它保持在左側。如何居中該菜單？

如果可能，請用全新的代碼回覆。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>10</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<link rel="stylesheet" href="styles.css" type="text/css" /> 
</head> 
<body> 
<h1>&nbsp;</h1> 
<div id="tabs"> 
    <ul> 
    <li><a href="http://www.free-css.com/"><span>CSS Templates</span></a></li> 
    <li><a href="http://www.free-css.com/"><span>CSS Layouts</span></a></li> 
    <li><a href="http://www.free-css.com/"><span>CSS Books</span></a></li> 
    <li><a href="http://www.free-css.com/"><span>CSS Menus</span></a></li> 
    <li><a href="http://www.free-css.com/"><span>CSS Tutorials</span></a></li> 
    <li><a href="http://www.free-css.com/"><span>CSS Reference</span></a></li> 
    <li><a rel="nofollow" target="_blank" href="http://www.exploding-boy.com/" title="explodingboy"><span>explodingboy</span></a></li> 
    </ul> 
</div> 
</body> 
</html> 

    body { 
    font: bold 11px/1.5em Verdana; 
    } 

h1 { 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-size:16px; 
    font-weight:bold; 
    margin:0; 
    padding:0; 
    } 

hr { 
    border:none; 
    border-top:1px solid #CCCCCC; 
    height:1px; 
    margin-bottom:25px; 
    } 

    #tabs { 
    text-align: center 
} 
#tabs ul { 
    display: inline-block; 
    padding: 10px 0 0 0 
} 

#tabs { 
    float:left; 
    width:100%; 
    font-size:93%; 
    border-bottom:1px solid #2763A5; 
    line-height:normal; 
    } 

#tabs ul { 
    margin:0; 
    padding:10px 10px 0 50px; 
    list-style:none; 
    } 

#tabs li { 
    display:inline; 
    margin:0; 
    padding:0; 
    } 

#tabs a { 
    float:left; 
    background:url("tableft.gif") no-repeat left top; 
    margin:0; 
    padding:0 0 0 4px; 
    text-decoration:none; 
    } 

#tabs a span { 
    float:left; 
    display:block; 
    background:url("tabright.gif") no-repeat right top; 
    padding:5px 15px 4px 6px; 
    color:#FFF; 
    } 

/* Commented Backslash Hack hides rule from IE5-Mac \*/ 
#tabs a span {float:none;} 

/* End IE5-Mac hack */ 
#tabs a:hover span { 
    color:#FFF; 
    } 

#tabs a:hover { 
    background-position:0% -42px; 
    } 

#tabs a:hover span { 
    background-position:100% -42px; 
    }

來源

2011-04-21 Raz

它開始在左邊我，所以它停留在相同的位置。如果你想它絕對居中，你可以設置一個寬度UL和margin：0 auto。或者，您可以將div設置爲1px x 1px，絕對位於左側或右側50％，然後將UL放入div中，以相對定位和UL的寬度的一半左右。 – Robert 2011-04-21 14:05:20

#tabs { 
    border-bottom:#2763a5 1px solid; 
    font-size:93%; 
    line-height:normal; 
    width:100%; 
    text-align:center; 
} 

#tabs ul { 
    display:inline-block; 
    display: -moz-inline-stack; // Firefox 2 doesn't understand inline-block but this acts the same 
    zoom: 1; // Make IE7 display inline-block correctly 
    *display: inline; // Only targets IE6 & IE7 
    list-style-image:none; 
    list-style-type:none; 
    margin:0; 
    padding-bottom:0; 
    padding-left:50px; 
    padding-right:10px; 
    padding-top:10px; 
}

（我傾向於避免使用inline-block的，因爲它不是在許多瀏覽器正確支持在線將正常工作在這裏。） - 我錯了這裏一定是inline-block的，我編輯的代碼以反映這與跨瀏覽器黑客，以確保它在所有主流瀏覽器中運行。

來源

2011-04-21 14:13:00

我試圖根據您的建議更改代碼，但現在菜單更粘到左側！ http://goo.gl/tKtyE – Raz 2011-04-21 14:24:23

我的不好，它需要內聯塊...我用跨瀏覽器黑客編輯我的答案，所以內聯塊應該在所有瀏覽器中正確顯示 – 2011-04-21 14:32:36

刪除float: left和padding爲#tabs a，

添加display: inline-block和#tabs li

末1px的固體＃2763A5，#tabs ul得到text-align: center。

希望這是有道理

來源

2011-04-21 14:08:03 gutierrezalex

這也行，所以+1。儘管在整個'ul'上做同樣的技巧比較容易，就像我的答案一樣。 – thirtydot 2011-04-21 14:10:06

如果你可以設置內部#tabs的ul一個固定的寬度，這是比較容易的：

#tabs ul { 
    width: 730px; 
    margin: 0 auto 
}

如果你不能（或不願）設置一個固定的寬度，可以使用display: inline-block：

#tabs { 
    text-align: center 
} 
#tabs ul { 
    display: inline-block; 
    padding: 10px 0 0 0 
}

如果您關心IE7，請使用：

#tabs ul { 
    display: inline-block; 
    *display: inline; 
    zoom: 1; 
    padding: 10px 0 0 0 
}

有關更多詳細信息，請參見this answer。

來源

2011-04-21 14:08:14 thirtydot

的變化選項卡本：

#tabs { 
    float: left; 
    width: 50%; 
    font-size: 93%; 
    border-bottom: 1px solid #2763A5; 
    line-height: normal; 
    margin: 0 auto; 
} 
/*and*/ 

#tabs a span { 
    /* remove float*/ 
}

來源

2011-04-21 14:33:09 Neal

如何居中該菜單？

回答

相關問題