css - 如何使 CSS 下拉菜单居中

Question

我需要一些帮助。我有一个 CSS 下拉菜单，但我希望标题居中，以便在所有屏幕尺寸上它都位于中间，因为此时它卡在左侧。

http://jsfiddle.net/y4vDC/

任何帮助将不胜感激。

这是一些 HTML 代码：

<div id='cssmenu'>
  <ul>
    <li><a href='events.html'><span>Events</span></a></li>
  </ul>

Answer 1

用#cssmenu > ul > li 的内容替换这个css：

#cssmenu > ul > li {

    display:inline-block;

    margin-left: 15px;       /* This is when the drop down box appears */

    position: relative;

}

并将其添加到您的 CSS 代码中：

 #cssmenu > ul {
        text-align:center;
 }

这里是：http: //jsfiddle.net/y4vDC/10/

Answer 2

您需要将li元素设置为inline，然后text-align在父元素上使用以使它们居中：

#cssmenu ul {
  text-align:center;
}
#cssmenu ul li {
  display: inline;
}

为了使它们保持不变inline，您需要从列表元素中删除浮点数。

http://jsfiddle.net/y4vDC/13/

Answer 3

你至少有两个简单的选择：

1. 设置 uldisplay:table为margin:auto; http://jsfiddle.net/y4vDC/11/
2. 将 ul设置display:inline-block为父http://jsfiddle.net/y4vDC/12/text-align:center

---

编辑 11/2019：现在您还可以使用：

• width:max-content;+margin:auto;

#cssmenu ul {
  margin: 0 auto;/* UPDATE  1/2 */
  padding:0;
  width:max-content;/* UPDATE 2/2 */
  padding: 0;
}

#cssmenu li {
  margin: 0;
  padding: 0;
}

#cssmenu a {
  margin: 0;
  padding: 0;
}

#cssmenu ul {
  list-style: none;
}

#cssmenu a {
  text-decoration: none;
}

#cssmenu {
  height: 70px;  /* This is for the main menu bit at the top */
  width: 100%;  /* This means on every screen no matter the size, the width will cover the top  */
  line-height: normal;
  text-align: center;
  background-color: rgb(35, 35, 35);
  box-shadow: 0px 2px 3px rgba(0, 0, 0, .4);
  vertical-align: middle;
}

#cssmenu>ul>li {
  float: left;
  margin-left: 15px;  /* This is when the drop down box appears */
  position: relative;
}

#cssmenu>ul>li>a {
  color: rgb(160, 160, 160);
  font-family: Verdana, 'Lucida Grande';
  font-size: 14px;
  line-height: 70px;  /* This bit chances the size of the text on the main heading */
  padding: 15px 24px; /* This is the padding between the different titles */
  -webkit-transition: color .15s;
  -moz-transition: color .15s;
  -o-transition: color .15s;
  transition: color .15s;
}

#cssmenu>ul>li>a:hover {
  color: rgb(250, 250, 250);
}

#cssmenu>ul>li>ul {
  opacity: 0;
  visibility: hidden;
  padding: 16px 0 20px 0;
  background-color: rgb(250, 250, 250);
  text-align: left;  /* This is for the text when box is dropped down, centered isnt always totally in the middle so best to have on the left */
  position: absolute;
  top: 55px;  /* This is for the drop down annimation */
  left: 50%;
  margin-left: -90px;
  width: 180px;
  -webkit-transition: all .3s .1s;
  -moz-transition: all .3s .1s;
  -o-transition: all .3s .1s;
  transition: all .3s .1s;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
}

#cssmenu>ul>li:hover>ul {
  opacity: 1;
  top: 65px;  /* This is how far from the top the drop down annimation will go  */
  visibility: visible;
}

#cssmenu>ul>li>ul:before {
  content: '';
  display: block;
  border-color: transparent transparent rgb(250, 250, 250) transparent;
  border-style: solid;
  border-width: 10px;  /* The border on the drop down box  */
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -10px;
}

#cssmenu>ul ul>li {
  position: relative;
}

#cssmenu ul ul a {  /* This is the drop down menu, change font or size when its drops down */
  color: rgb(50, 50, 50);
  font-family: Verdana, 'Lucida Grande';
  font-size: 13px;
  background-color: rgb(250, 250, 250);
  padding: 5px 8px 7px 16px;
  display: block;
  -webkit-transition: background-color .1s;
  -moz-transition: background-color .1s;
  -o-transition: background-color .1s;
  transition: background-color .1s;
}

#cssmenu ul ul a:hover {
  background-color: rgb(240, 240, 240);
}

#cssmenu ul ul ul {  /* In this build i havent included a sub sub menu in, but here is the code if ever needed */
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: -16px;
  left: 206px;  /* This is for a sub sub menu */
  padding: 16px 0 20px 0;
  background-color: rgb(250, 250, 250);
  text-align: left;
  width: 160px;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
}

#cssmenu ul ul>li:hover>ul {
  opacity: 1;
  left: 196px;
  visibility: visible;
}

#cssmenu ul ul a:hover {
  background-color: rgb(114, 164, 65);
  color: rgb(240, 240, 240);
}

#wrapper #page #page-bgtop #page-bgbtm #content .post .entry table tr td {
  text-align: center;
}

<div id='cssmenu'>
  <ul>
    <li class='active'><a href='index.html'><span>Home</span></a></li>
    <li class='has-sub'><a href='#'><span>About Us</span></a>
      <ul>
        <li class='has-sub'><a href='history.html'><span>History Of Elvyn</span></a></li>
        <li class='has-sub'><a href='lifeinelvyn.html'><span>Life In Elvyn</span></a></li>
        <li class='has-sub'><a href='committee.html'><span>Our Committee</span></a></li>
        <li class='has-sub'><a href='warden.html'><span>The Warden Team</span></a></li>
        <li class='has-sub'><a href='http://www.lboro.ac.uk/services/campus-living/food-drink/halldiningfooddiaries/cateredhallmenu/' target="_blank"><span>Catered Menu</span></a></li>
      </ul>
      <li><a href='events.html'><span>Events</span></a></li>
      <li class='has-sub'><a href='#'><span>Media</span></a>
        <ul>
          <li class='has-sub'><a href='mediaaboutus.html'><span>About Us</span></a></li>
          <li class='has-sub'><a href='mediasubcommittee.html'><span>Sub-Committee</span></a></li>
          <li class='has-sub'><a href='https://www.facebook.com/ElvynRichardsMedia#' target="_blank"><span>Elvyn Images</span></a></li>
          <li class='has-sub'><a href='http://www.youtube.com/channel/UCyKYhzsknhggkykoZR9KC-g/videos?flow=grid&view=0' target="_blank"><span>Elvyn TV</span></a></li>
          <li class='has-sub'><a href='elvynapp.html'><span>Elvyn App</span></a></li>
          <ul>
          </ul>
        </ul>
  </ul>
</div>

• 或flex+justify-content 参见：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

#cssmenu ul {
  margin: 0;
  padding:0;
}

#cssmenu li {
  margin: 0;
  padding: 0;
}

#cssmenu a {
  margin: 0;
  padding: 0;
}

#cssmenu ul {
  list-style: none;
}

#cssmenu a {
  text-decoration: none;
}

#cssmenu {
  /* UPDATE  1/2 */display:flex;
  /* UPDATE  2/2 */justify-content:center;
  height: 70px;  /* This is for the main menu bit at the top */
  width: 100%;  /* This means on every screen no matter the size, the width will cover the top  */
  line-height: normal;
  text-align: center;
  background-color: rgb(35, 35, 35);
  box-shadow: 0px 2px 3px rgba(0, 0, 0, .4);
  /*vertical-align: middle;*/
}

#cssmenu>ul>li {
  float: left;
  margin-left: 15px;  /* This is when the drop down box appears */
  position: relative;
}

#cssmenu>ul>li>a {
  color: rgb(160, 160, 160);
  font-family: Verdana, 'Lucida Grande';
  font-size: 14px;
  line-height: 70px;  /* This bit chances the size of the text on the main heading */
  padding: 15px 24px; /* This is the padding between the different titles */
  -webkit-transition: color .15s;
  -moz-transition: color .15s;
  -o-transition: color .15s;
  transition: color .15s;
}

#cssmenu>ul>li>a:hover {
  color: rgb(250, 250, 250);
}

#cssmenu>ul>li>ul {
  opacity: 0;
  visibility: hidden;
  padding: 16px 0 20px 0;
  background-color: rgb(250, 250, 250);
  text-align: left;  /* This is for the text when box is dropped down, centered isnt always totally in the middle so best to have on the left */
  position: absolute;
  top: 55px;  /* This is for the drop down annimation */
  left: 50%;
  margin-left: -90px;
  width: 180px;
  -webkit-transition: all .3s .1s;
  -moz-transition: all .3s .1s;
  -o-transition: all .3s .1s;
  transition: all .3s .1s;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
}

#cssmenu>ul>li:hover>ul {
  opacity: 1;
  top: 65px;  /* This is how far from the top the drop down annimation will go  */
  visibility: visible;
}

#cssmenu>ul>li>ul:before {
  content: '';
  display: block;
  border-color: transparent transparent rgb(250, 250, 250) transparent;
  border-style: solid;
  border-width: 10px;  /* The border on the drop down box  */
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -10px;
}

#cssmenu>ul ul>li {
  position: relative;
}

#cssmenu ul ul a {  /* This is the drop down menu, change font or size when its drops down */
  color: rgb(50, 50, 50);
  font-family: Verdana, 'Lucida Grande';
  font-size: 13px;
  background-color: rgb(250, 250, 250);
  padding: 5px 8px 7px 16px;
  display: block;
  -webkit-transition: background-color .1s;
  -moz-transition: background-color .1s;
  -o-transition: background-color .1s;
  transition: background-color .1s;
}

#cssmenu ul ul a:hover {
  background-color: rgb(240, 240, 240);
}

#cssmenu ul ul ul {  /* In this build i havent included a sub sub menu in, but here is the code if ever needed */
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: -16px;
  left: 206px;  /* This is for a sub sub menu */
  padding: 16px 0 20px 0;
  background-color: rgb(250, 250, 250);
  text-align: left;
  width: 160px;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
}

#cssmenu ul ul>li:hover>ul {
  opacity: 1;
  left: 196px;
  visibility: visible;
}

#cssmenu ul ul a:hover {
  background-color: rgb(114, 164, 65);
  color: rgb(240, 240, 240);
}

#wrapper #page #page-bgtop #page-bgbtm #content .post .entry table tr td {
  text-align: center;
}

<div id='cssmenu'>
  <ul>
    <li class='active'><a href='index.html'><span>Home</span></a></li>
    <li class='has-sub'><a href='#'><span>About Us</span></a>
      <ul>
        <li class='has-sub'><a href='history.html'><span>History Of Elvyn</span></a></li>
        <li class='has-sub'><a href='lifeinelvyn.html'><span>Life In Elvyn</span></a></li>
        <li class='has-sub'><a href='committee.html'><span>Our Committee</span></a></li>
        <li class='has-sub'><a href='warden.html'><span>The Warden Team</span></a></li>
        <li class='has-sub'><a href='http://www.lboro.ac.uk/services/campus-living/food-drink/halldiningfooddiaries/cateredhallmenu/' target="_blank"><span>Catered Menu</span></a></li>
      </ul>
      <li><a href='events.html'><span>Events</span></a></li>
      <li class='has-sub'><a href='#'><span>Media</span></a>
        <ul>
          <li class='has-sub'><a href='mediaaboutus.html'><span>About Us</span></a></li>
          <li class='has-sub'><a href='mediasubcommittee.html'><span>Sub-Committee</span></a></li>
          <li class='has-sub'><a href='https://www.facebook.com/ElvynRichardsMedia#' target="_blank"><span>Elvyn Images</span></a></li>
          <li class='has-sub'><a href='http://www.youtube.com/channel/UCyKYhzsknhggkykoZR9KC-g/videos?flow=grid&view=0' target="_blank"><span>Elvyn TV</span></a></li>
          <li class='has-sub'><a href='elvynapp.html'><span>Elvyn App</span></a></li>
          <ul>
          </ul>
        </ul>
  </ul>
</div>

• 或grid查看：https ://css-tricks.com/snippets/css/complete-guide-grid/ & https://gridbyexample.com/

#cssmenu ul {
  margin: 0 ;
  padding:0;
}

#cssmenu li {
  margin: 0;
  padding: 0;
}

#cssmenu a {
  margin: 0;
  padding: 0;
}

#cssmenu ul {
  list-style: none;
}

#cssmenu a {
  text-decoration: none;
}

#cssmenu {
  /* UPDATE  1/2 */display:grid;
  /* UPDATE  2/2 */justify-content:center;
  height: 70px;  /* This is for the main menu bit at the top */
  width: 100%;  /* This means on every screen no matter the size, the width will cover the top  */
  line-height: normal;
  text-align: center;
  background-color: rgb(35, 35, 35);
  box-shadow: 0px 2px 3px rgba(0, 0, 0, .4);
  vertical-align: middle;
}

#cssmenu>ul>li {
  float: left;
  margin-left: 15px;  /* This is when the drop down box appears */
  position: relative;
}

#cssmenu>ul>li>a {
  color: rgb(160, 160, 160);
  font-family: Verdana, 'Lucida Grande';
  font-size: 14px;
  line-height: 70px;  /* This bit chances the size of the text on the main heading */
  padding: 15px 24px; /* This is the padding between the different titles */
  -webkit-transition: color .15s;
  -moz-transition: color .15s;
  -o-transition: color .15s;
  transition: color .15s;
}

#cssmenu>ul>li>a:hover {
  color: rgb(250, 250, 250);
}

#cssmenu>ul>li>ul {
  opacity: 0;
  visibility: hidden;
  padding: 16px 0 20px 0;
  background-color: rgb(250, 250, 250);
  text-align: left;  /* This is for the text when box is dropped down, centered isnt always totally in the middle so best to have on the left */
  position: absolute;
  top: 55px;  /* This is for the drop down annimation */
  left: 50%;
  margin-left: -90px;
  width: 180px;
  -webkit-transition: all .3s .1s;
  -moz-transition: all .3s .1s;
  -o-transition: all .3s .1s;
  transition: all .3s .1s;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
}

#cssmenu>ul>li:hover>ul {
  opacity: 1;
  top: 65px;  /* This is how far from the top the drop down annimation will go  */
  visibility: visible;
}

#cssmenu>ul>li>ul:before {
  content: '';
  display: block;
  border-color: transparent transparent rgb(250, 250, 250) transparent;
  border-style: solid;
  border-width: 10px;  /* The border on the drop down box  */
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -10px;
}

#cssmenu>ul ul>li {
  position: relative;
}

#cssmenu ul ul a {  /* This is the drop down menu, change font or size when its drops down */
  color: rgb(50, 50, 50);
  font-family: Verdana, 'Lucida Grande';
  font-size: 13px;
  background-color: rgb(250, 250, 250);
  padding: 5px 8px 7px 16px;
  display: block;
  -webkit-transition: background-color .1s;
  -moz-transition: background-color .1s;
  -o-transition: background-color .1s;
  transition: background-color .1s;
}

#cssmenu ul ul a:hover {
  background-color: rgb(240, 240, 240);
}

#cssmenu ul ul ul {  /* In this build i havent included a sub sub menu in, but here is the code if ever needed */
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: -16px;
  left: 206px;  /* This is for a sub sub menu */
  padding: 16px 0 20px 0;
  background-color: rgb(250, 250, 250);
  text-align: left;
  width: 160px;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
}

#cssmenu ul ul>li:hover>ul {
  opacity: 1;
  left: 196px;
  visibility: visible;
}

#cssmenu ul ul a:hover {
  background-color: rgb(114, 164, 65);
  color: rgb(240, 240, 240);
}

#wrapper #page #page-bgtop #page-bgbtm #content .post .entry table tr td {
  text-align: center;
}

<div id='cssmenu'>
  <ul>
    <li class='active'><a href='index.html'><span>Home</span></a></li>
    <li class='has-sub'><a href='#'><span>About Us</span></a>
      <ul>
        <li class='has-sub'><a href='history.html'><span>History Of Elvyn</span></a></li>
        <li class='has-sub'><a href='lifeinelvyn.html'><span>Life In Elvyn</span></a></li>
        <li class='has-sub'><a href='committee.html'><span>Our Committee</span></a></li>
        <li class='has-sub'><a href='warden.html'><span>The Warden Team</span></a></li>
        <li class='has-sub'><a href='http://www.lboro.ac.uk/services/campus-living/food-drink/halldiningfooddiaries/cateredhallmenu/' target="_blank"><span>Catered Menu</span></a></li>
      </ul>
      <li><a href='events.html'><span>Events</span></a></li>
      <li class='has-sub'><a href='#'><span>Media</span></a>
        <ul>
          <li class='has-sub'><a href='mediaaboutus.html'><span>About Us</span></a></li>
          <li class='has-sub'><a href='mediasubcommittee.html'><span>Sub-Committee</span></a></li>
          <li class='has-sub'><a href='https://www.facebook.com/ElvynRichardsMedia#' target="_blank"><span>Elvyn Images</span></a></li>
          <li class='has-sub'><a href='http://www.youtube.com/channel/UCyKYhzsknhggkykoZR9KC-g/videos?flow=grid&view=0' target="_blank"><span>Elvyn TV</span></a></li>
          <li class='has-sub'><a href='elvynapp.html'><span>Elvyn App</span></a></li>
          <ul>
          </ul>
        </ul>
  </ul>
</div>