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

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

Answer 2

これが1つの解決策です。私が見つけた問題は、であったという.pureCssMenuことでしたfloated left。どこで起こっているのかがわかるように、それを上書きしました。おそらく、cssを適切に編集することをお勧めします。理解できない場合は、お知らせください。詳しく説明します。で包みましdiv (.centerme)たtext-align: center;

http://jsfiddle.net/nYbcW/

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

Answer 3

divで囲み、divを中央に配置します。

<div class="table">

次に、CSSに以下を追加します

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

実例を参照してください。 http://jsfiddle.net/uh2Jt/3/

Answer 4

設定するだけ：

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 5

これはあなたが得ることができる最も簡単なものです：

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

必要に応じて幅と高さを調整するだけです。

注：このコードをスタイルの下部に追加できるので、わざわざ検索する必要はありません。