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/

Answer 2

将width的内联ul更改为100％，删除菜单项的浮点数并将margin: 0添加到正文中：

Additon：您必须将该代码段切换为“整页”模式才能看到解决方案。

body {
background: #333;
margin: 0;
}
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;
  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;
  }
}

<ul id="menu" style="width:100%; 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>

将菜单对齐到页面中心

2 个答案: