Question

我无法集中我的css菜单。我使用impresspages所以我的菜单生成代码只是一个PHP代码。

    .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 */

Answer 1

由于您的菜单包含两行，因此无法使用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类来修复标题元素的宽度，它太窄了。

我如何以css菜单为中心？

1 个答案: