我怎樣才能中心我的CSS菜單？

-5

我無法集中我的css菜單。我使用Impresspages，所以我的菜單生成代碼只是一個PHP代碼。我怎樣才能中心我的CSS菜單？

.cssmenu ul{z-index:50;width:960px;background:#666 url(img/overlay.png) repeat-x 0 -110px;line-height:100%;font:normal .8em/1.4em Arial, Helvetica, sans-serif;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:0 0 0 rgba(0,0,0,.0);-moz-box-shadow:0 0 0 rgba(0,0,0,.0);margin:0 auto;padding:0; text-align: center;} 

.cssmenu li{float:left;position:relative;list-style:none;margin:0;padding:3px 0 3px 2px;} 

.cssmenu a{font-weight:700;color:#FFF;text-decoration:none;display:block;border-radius:0;-webkit-border-radius:2px;-moz-border-radius:2px;text-shadow:0 1px 1px rgba(0,0,0,.3);margin:0 10px;padding:5px;} 

.cssmenu >ul>li+li{border-left:solid 1px grey;margin:0 auto;} 

.cssmenu a:hover{background:#000;color:#fff;} 

.cssmenu .active a,.cssmenu li:hover > a{background:#666 url(img/overlay2.png) repeat-x 0 -40px;color:#444;border-top:solid 0 #f8f8f8;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2);text-shadow:0 1px 0 rgba(255,255,255,1);} 

.cssmenu ul ul li:hover a,{color:#000;} 

.cssmenu li:hover li a{background:none;border:none;color:#666;-webkit-box-shadow:none;-moz-box-shadow:none;} 

.cssmenu ul ul a:hover{background:#000 repeat-x 0 -100px!important;color:#fff!important;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;text-shadow:0 1px 1px rgba(0,0,0,.1);} 

.cssmenu ul ul{display:none;width:250px;position:absolute;top:38px;left:0;background:#fff url(img/overlay2.png) repeat-x 0 0;border:solid 1px #b4b4b4;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.3);-moz-box-shadow:0 1px 3px rgba(0,0,0,.3);box-shadow:0 1px 3px rgba(0,0,0,.3);margin:0 auto;padding:0;} 

.cssmenu ul ul li{float:none;margin:0 auto;padding:3px;} 

.cssmenu ul ul a{font-weight:700;color:#000;letter-spacing:0;word-spacing:0;font-size:16px;text-align:center;font-family:trebuchet MS, sans-serif;line-height:1;opacity:100;} 

.cssmenu ul:after{content:'.';display:block;clear:both;visibility:hidden;line-height:0;height:0;} 

* html .cssmenu ul{height:1%;}/* CSS Document */

來源

2013-03-12 György Sárközi

掌握一堆代碼並不是獲得幫助的好方法。將您的代碼減少到相關位，或者創建一個清楚地表明您的問題的演示。 http://jsfiddle.net – isherwood 2013-03-12 14:49:56

正在使用的代碼在http：gerocskeramia.hu – 2013-03-12 14:52:19

究竟是什麼錯誤，它應該如何表現不同？突出顯示問題區域的屏幕截圖會很有幫助，或者是一個全面的描述，指的是前面評論中提到的實時頁面。 – 2013-03-12 14:59:42

因爲你的菜單包裝成兩行，所以你不能用CSS居中它。用較少（或較窄）的元素適合於一行：

<header class="grid_11_REMOVED"> 
    <div class="cssmenu clearfix" style="width: auto;"> 
     <div style="background: [styles from menu]; text-align: center;"> 
      <ul class="level1" style="display: inline-block;"> 
      ... 
      </ul> 
     </div> 
    </div> 
</header>

菜單元素默認顯示爲塊，因此是全角。不僅如此，我還通過刪除.grid_11類來修復了過窄的頭元素的寬度。

來源

2013-03-12 15:29:11 isherwood

我怎樣才能中心我的CSS菜單？

回答

相關問題