如何使菜单居中 css

Question

我完成了我的网站，现在开始让它响应，但我遇到了问题。在最低屏幕宽度（低于 670 像素）下，我将菜单放在徽标下方。我将徽标居中，但无法将菜单居中。用 fireBug 浪费了一整天，但找不到我犯的错误。

您可以在地址http://www.kamari.info

看到网站

这是最低屏幕宽度的菜单。

#banner1menu > div.inner {
 color: #ffffff;
 margin-top: 30px;
 text-align: right;
 font-size: 12px;
 font-family: 'open_sanssemibold';
}
#banner1menu ul.menu, #banner1menu ul.maximenuck {
            margin: 0;
            padding: 0;
}

#banner1menu ul.menu li, #banner1menu ul.maximenuck li  {
 margin: 0;
 padding: 0;
 display: inline-block;
 list-style:none;
}

#banner1menu ul.menu > li > a, #banner1menu ul.menu > li > span.separator,
#banner1menu ul.maximenuck > li > a, #banner1menu ul.maximenuck > li > span.separator{
    display:block;
 border-right: #ffffff 2px solid;
 color: #ffffff;
 margin-bottom: 5px;
 padding-right: 12px;
 padding-left: 12px;
 font-size: 12px;
 font-family: 'open_sanssemibold';
}

#banner1menu ul.menu > li:hover > a, #banner1menu ul.menu > li:hover > span.separator,
#banner1menu ul.maximenuck > li:hover > a, #banner1menu ul.maximenuck > li:hover > span.separator {
 color: #555555;
 font-size: 12px;
 font-family: 'open_sanssemibold';

CUSTOM.CSS

#cont1 { height: 32px; }

#head2logo > div.inner {margin-top: -6px;}

#banner1menu ul.menu li.item-118 a { border-right: none;
                                                    padding-right: 0;}

#banner1menu > div.inner {float: right;}

#cont2 { height: 95px; }

.flexslider { z-index: -1; }

#cont2 { position: relative;
                z-index: 9999; }

/*#maincontent > div.inner { margin-top: -25px; }*/
#centar > div.inner { padding: 0 10px; }

.djslider-default .slider-container {border-radius: 10px 10px 0 0; }

.djslider-default .navigation-container .next-button { outline: none;}
.djslider-default .navigation-container .prev-button { outline: none;}

.sakrij {
 display: none !important;
}

@media screen and (max-width: 950px) {

#cont1 { height: 53px; }

#cont1 .flexiblemodule {
 width: 100% !important;
float: none;
}

#head1kontakti > div.inner { margin-top: -15px;}

.sakrij2 {
 display: none !important;
}
.prikaz2 {
 display: inline !important;
}

#cont2 { height: 140px; }

#banner1 {
 height: auto !important;
}
#banner1 .logobloc {
 float :none !important;
 width: auto !important;
}
#banner1 img {
 display :block !important;
 margin: 10px auto 0 auto !important;}

#banner1menu > div.inner {margin-top: 20px;
     float: left;}
#banner1menu ul.menu li.item-101 a {                                                 padding-left: 8px;}

}


@media screen and (max-width: 670px) {

.sakrij3 {
 display: none !important;
}
.prikaz3 {
 display: inline !important;
}
#cont1 { height: 32px; }
#head1kontakti > div.inner { margin-top: 0px;}
#cont2 { height: 190px; }

#banner1menu > div.inner {text-align: center;}
#cont8 {display: none !important;}

}

Answer 1

没有一些代码片段就不容易提供帮助，但试试这个（在 custom.css 中适用的地方替换）：

@media screen and (max-width:670px){
    #banner1menu ul.menu li.item-101 a{
        padding-left: 0 !important;
    }
    #banner1menu ul.menu{
        margin:  0 15px !important;
    }

}

Answer 2

@media screen and (max-width:670px){
.meni {
display: inline-block;
margin: 0;
padding: 0;
width: 90%;
 }
}

使用它来制作菜单center.I认为这会对您有所帮助

Answer 3

问题已解决 - 刚刚从我的 joomla 模块中删除了 nav-pills css 后缀。

非常抱歉打扰您，非常感谢您的努力

如何使菜单居中 css

How to center menu css

css

menu

center