css - 试图将在 purecssmenu.com 上制作的 CSS 菜单居中

Question

我有一个在 purecssmenu.com 上生成的菜单，但我无法将其放在我的页面中心，这是代码...

<!-- Start PureCSSMenu.com STYLE -->
        <style>
        #pcm{display:none;}
        ul.pureCssMenu ul{display:none}
        ul.pureCssMenu li:hover>ul{display:block}
        ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
        ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
        ul.pureCssMenu,ul.pureCssMenu ul {
            margin:0px;
            list-style:none;
            padding:0px 2px 2px 0px;
            background-color:#000000;
            background-repeat:repeat;
            border-color:#000000;
            border-width:1px;
            border-style:solid;
        }
        ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
            display:block;
            zoom:1;
            float: left;
        }
        ul.pureCssMenu ul{
            width:80.85000000000001px;
        }
        ul.pureCssMenu li{
            display:block;
            margin:2px 0px 0px 2px;
            font-size:0px;
        }
        ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
        outline-style:none;
        }
        ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
            display:block;
            vertical-align:middle;
            background-color:#000000;
            border-width:1px;
            border-color:#000000;
            border-style:solid;
            text-align:left;
            text-decoration:none;
            padding:2px 5px 2px 10px;
            _padding-left:0;
            font:11px Arial;
            color: #969696;
            text-decoration:none;
            cursor:default;
        }
        ul.pureCssMenu span{
            overflow:hidden;
        }
        ul.pureCssMenu li {
            float:left;
        }
        ul.pureCssMenu ul li {
            float:none;
        }
        ul.pureCssMenu ul a {
            text-align:left;
            white-space:nowrap;
        }
        ul.pureCssMenu li.sep{
            text-align:left;
            padding:0px;
            line-height:0;
            height:100%;
        }
        ul.pureCssMenu li.sep span{
            float:none; padding-right:0;
            width:3px;
            height:100%;
            display:inline-block;
            background-color:#cccccc #111111 #111111 #cccccc;   background-image:none;}
        ul.pureCssMenu ul li.sep span{
            width:100%;
            height:3px;
        }
        ul.pureCssMenu li:hover{
            position:relative;
        }
        ul.pureCssMenu li:hover>a{
            background-color:#000000;
            border-color:#000000;
            border-style:solid;
            font:11px Arial;
            color: #ffa500;
            text-decoration:none;
        }
        ul.pureCssMenu li a:hover{
            position:relative;
            background-color:#000000;
            border-color:#000000;
            border-style:solid;
            font:11px Arial;
            color: #ffa500;
            text-decoration:none;
        }
        ul.pureCssMenu li.dis a {
            color: #666 !important;
        }
        ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
        height:16px;
        }
        ul.pureCssMenu ul img {width:16px;
        height:16px;
        }
        ul.pureCssMenu img.over{display:none}
        ul.pureCssMenu li.dis a:hover img.over{display:none !important}
        ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
        ul.pureCssMenu li:hover > a img.def  {display:none}
        ul.pureCssMenu li:hover > a img.over {display:inline}
        ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
        ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
        ul.pureCssMenu a:hover ul{display:block}
        ul.pureCssMenu span{
            display:block;
            background-image:url(./images/arr_white.gif);
            background-position:right center;
            background-repeat: no-repeat;
           padding-right:12px;}
        ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrv_white.gif);
        }
        ul.pureCssMenu a:hover span{    _background-image:url(./images/arrv_white.gif)}
        ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_white.gif)}
        </style>
<!-- End PureCSSMenu.com STYLE -->

这是 html，在这篇文章中可能甚至不需要女巫，但我想我会包括它.. 我只希望该菜单位于我的网站中心。

<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum">
    <li class="pureCssMenui"><a class="pureCssMenui" href="home.html" target="scare">home</a></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="#">about</a></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>haunts</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="pureCssMenum">
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">2009</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">2010</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">2011</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">2012</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="#">studio</a></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>products</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="pureCssMenum">
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">nightmares</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">hauntworks</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">atmosfears</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">frightwears</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>links</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="pureCssMenum">
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">haunts</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">suppliers</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">resources</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="#">contact</a></li>
</ul>
<a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a>
<!-- End PureCSSMenu.com MENU -->

在此先感谢您的时间。

Answer 1

用 div 包围它，然后将 div 居中。

<div class="table">

然后将以下内容添加到您的CSS

.table {
    display: table;   /* Allow the centering to work */
    margin: 0 auto;
}

请参阅工作示例。 http://jsfiddle.net/uh2Jt/3/

Answer 2

只是设置：

ul.pureCssMenu,ul.pureCssMenu ul {
    margin:0 auto;
}

不起作用，因为它看起来菜单的位置设置为absolute. 而不是弄乱菜单的代码，你可以把它放在一个包装器 div 中，如下所示：

<div class="menuWrapper">
    all the html for the menu
</div>

然后使用这个 CSS，无论宽度适合你：

.menuWrapper{
    margin: 0 auto;
    width: 400px;
}

在此处查看示例：http: //jsfiddle.net/mCmfU/

Answer 3

ul.pureCssMenu,ul.pureCssMenu ul {
    margin:0 auto;
}

Answer 4

这是一个解决方案。我发现的问题.pureCssMenu是floated left. 我只是覆盖了它，所以你可以看到它发生在哪里。不过，正确编辑 css 可能是一个更好的主意，如果你不明白，请告诉我，我会解释更多。还把它包裹在一个div (.centerme)withtext-align: center;

http://jsfiddle.net/nYbcW/

.centerme{
    text-align: center;
}
ul.pureCssMenu {
    float: none !important;
    display: inline-block !important;
    text-align:center
}

Answer 5

这是您可以获得的最简单的方法：

ul.pureCssMenu,ul.pureCssMenu ul {
    margin:0 auto;
    float: none;
    height: 25px;
    width: 25%;
}

只需根据您的需要调整宽度和高度。

注意：您可以将这段代码添加到样式的底部，这样您就无需费心寻找它。