logo标签列表

如何将CSS下拉菜单居中显示

cssdrop-down-menumenucenter
7

我需要一些帮助。我有一个CSS下拉菜单，但我希望标题居中，以便在所有屏幕大小上都能够在中间，因为目前它被固定在左侧。

http://jsfiddle.net/y4vDC/

非常感谢任何帮助。

这是HTML代码的一部分：

<div id='cssmenu'>
  <ul>
    <li><a href='events.html'><span>Events</span></a></li>
  </ul>
3个回答
9
用 #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/

非常感谢，完美地解决了问题！ :) - DanCarroll
2
它可以工作，但会弄乱父级div，因为第二个ul不是绝对定位的，当打开时会改变父级位置。 - Gediminas Šukys
2
您需要将您的 li 元素设置为 inline，然后在父元素上使用 text-align 属性来使它们居中显示：
#cssmenu ul {
  text-align:center;
}
#cssmenu ul li {
  display: inline;
}

为了保持它们呈现为行内，你需要从列表元素中删除float。 http://jsfiddle.net/y4vDC/13/
1

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

  1. 将 ul 设置为 display:table 和 margin:auto;http://jsfiddle.net/y4vDC/11/
  2. 在父元素上将 ul 设置为 display:inline-block 和 text-align:centerhttp://jsfiddle.net/y4vDC/12/

编辑 2019年11月: 现在你也可以使用以下方法：

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

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接