如何将 CSS 下拉菜单居中

How To Center A CSS Drop Down Menu

提问by DanCarroll

I'm in need of some help. I have a CSS dropdown menu but i want the titles to be centered so on all screen sizes it would be in the middle, as at the moment its stuck to the left.

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

http://jsfiddle.net/y4vDC/

http://jsfiddle.net/y4vDC/

Any help would be greatly appreciated.

任何帮助将不胜感激。

Here is a bit of the HTML code:

下面是一些 HTML 代码：

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

回答by user1447420

replace this css with what you have for #cssmenu > ul > li:

用你拥有的 #cssmenu > ul > li 替换这个 css：

#cssmenu > ul > li {

    display:inline-block;

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

    position: relative;

}

and add this to your css codes:

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

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

here it is: http://jsfiddle.net/y4vDC/10/

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

回答by pzin

You need your lielements to be inline, and then use text-alignon the parent element to center them:

你需要你的li元素是inline，然后text-align在父元素上使用以将它们居中：

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

In order that they stay as inline, you need to delete the float from the list elements.

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

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

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

回答by G-Cyrillus

you have at least 2 easy options:

您至少有 2 个简单的选择：

1. set ul as display:tableand margin:auto;http://jsfiddle.net/y4vDC/11/
2. set ul as display:inline-blockand text-align:centeron parent http://jsfiddle.net/y4vDC/12/

1. 集UL作为display:table和margin:auto;http://jsfiddle.net/y4vDC/11/
2. 设置UL作为display:inline-block和text-align:center对父母http://jsfiddle.net/y4vDC/12/

---

---

edit11/2019: and nowdays you can also use:

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

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

• 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>

• or flex+ justify-contentsee : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

• 或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>

• or gridsee: https://css-tricks.com/snippets/css/complete-guide-grid/& https://gridbyexample.com/

• 或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>