html - 将菜单对齐到页面的中心

Question

我有以下菜单。我想将所有菜单标题对齐到页面的中心。我尝试过对齐文本和对齐内容，但没有成功。我什至将菜单放在与中心对齐的 td 的表格中，但它不起作用。有帮助吗？

 <ul id="menu" style="width:200%; text-align:center; margin:0 auto;">
                    <li>
                        <a href=" #">
                            Home
                        </a>
                    </li>
                    <li>
                        <a href="#">About &#65516;</a>
                        <ul class="hidden">
                            <li><a href="#">Who We Are</a></li>
                            <li><a href="#">What We Do</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Portfolio &#65516;</a>
                        <ul class="hidden">
                            <li><a href="#">Photography</a></li>
                            <li><a href="#">Web &amp; User Interface Design</a></li>
                            <li><a href="#">Illustration</a></li>
                        </ul>
                    </li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>

这是 CSS:

 ul {
     background-repeat: repeat-x;
        list-style-type: none;
        margin: 0;
        padding: 0;
        position: absolute;

    }

    /*Create a horizontal list with spacing*/
    li {
        display: inline-block;
        float: left;
        margin-right: 0px;

    }

        /*Style for menu links*/
        li a {
         background-image:url("../image_menu/bg.jpg");
         background-repeat: repeat-x;
            display: block;
            min-width: 140px;
            width:100%;
            height: 85px;
            text-align: center;
            line-height: 50px;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: #fff;

            text-decoration: none;
        }

        /*Hover state for top level links*/
        li:hover a {
            background: #19c589;
        }

        /*Style for dropdown links*/
        li:hover ul a {
            background: #f3f3f3;
            color: #2f3036;
            height: 40px;
            line-height: 40px;
        }

            /*Hover state for dropdown links*/
            li:hover ul a:hover {
                background: #19c589;
                color: #fff;
            }

        /*Hide dropdown links until they are needed*/
        li ul {
            display: none;
        }

            /*Make dropdown links vertical*/
            li ul li {
                display: block;
                float: none;
            }

                /*Prevent text wrapping*/
                li ul li a {
                    width: auto;
                    min-width: 100px;
                    padding: 0 20px;
                }

    /*Display the dropdown on hover*/
    ul li a:hover + .hidden, .hidden:hover {
        display: block;
    }

    /*Style 'show menu' label button and hide it by default*/
    .show-menu {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-decoration: none;
        color: #fff;
        background: #19c589;
        text-align: center;
        padding: 10px 0;
        display: none;
                background:url("../image_menu/bg.png");
     background-repeat: repeat-x;
    }

    /*Hide checkbox*/
    input[type=checkbox] {
        display: none;
        -webkit-appearance: none;
    }

        /*Show menu when invisible checkbox is checked*/
        input[type=checkbox]:checked ~ #menu {
            display: block;
        }


    /*Responsive Styles*/

    @media screen and (max-width : 760px) {
        /*Make dropdown links appear inline*/
        ul {
            position: static;
            display: none;
        }
        /*Create vertical spacing*/
        li {
            margin-bottom: 1px;
        }
            /*Make all menu links full width*/
            ul li, li a {
                width: 100%;
            }
        /*Display 'show menu' link*/
        .show-menu {
                    background:url("../image_menu/bg.jpg");
     background-repeat: repeat-x;
            display: block;
        }
    }

感谢任何帮助

Answer 1

如果你想让导航在菜单栏居中。您所要做的就是将 #menu 更改为 width:100% 而不是 width:200% 并去掉 float:left; 在 li 上。这是一个 JSFiddle。希望这会有所帮助。

https://jsfiddle.net/h1v85zuf/