使用菜单脚本时，其仅浮动在左侧。 我该如何放置DIV的中心

Question

我在网上找到了该脚本，但使用此脚本时仅在左侧浮动。 我想要这个在DIV的中心（id =“ menuback”）。

尝试跟随但不起作用...

• margin-left：auto;
• 右边距：自动；
• text-align：center;

 ul { list-style-type:none; margin:0; padding:0; position: absolute; } /*Create a horizontal list with spacing*/ li { display:inline-block; float: left; margin-right: 1px; } /*Style for menu links*/ li a { display:block; min-width:140px; height: 50px; text-align: center; line-height: 50px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; background: #2f3036; 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; } /*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 { display:block; } } 

 <div id="menuback" style="text-align:center"> <label for="show-menu" class="show-menu">Show Menu</label> <input type="checkbox" id="show-menu" role="button"> <ul id="menu"> <li><a href="#">menu1</a></li> <li> <a href="#">menu2</a> <ul class="hidden"> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> </ul> </li> <li> <a href="#">menu3</a> <ul class="hidden"> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> </ul> </li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </div> 

Answer 1

给菜单指定一个特定的宽度，例如400px并设置其margin：0自动；

Answer 2

问题是您的ul#menu具有position: absolute因此它不遵循文档的流程，因此请删除position: absolute并设置display: inline-block

像这样：

 ul { list-style-type:none; margin:0; padding:0; /*position: absolute;*/ /*removed*/ display: inline-block; /*added*/ } /*Create a horizontal list with spacing*/ li { display:inline-block; float: left; margin-right: 1px; } /*Style for menu links*/ li a { display:block; min-width:140px; height: 50px; text-align: center; line-height: 50px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; background: #2f3036; 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; } /*Hide checkbox*/ input[type=checkbox]{ display: none; -webkit-appearance: none; } /*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 { display:block; } /*Show menu when invisible checkbox is checked*/ input[type=checkbox]:checked ~ #menu{ display: block; /*setting block at low resolution*/ } } 

 <div id="menuback" style="text-align:center"> <label for="show-menu" class="show-menu">Show Menu</label> <input type="checkbox" id="show-menu" role="button"> <ul id="menu"> <li><a href="#">menu1</a></li> <li> <a href="#">menu2</a> <ul class="hidden"> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> </ul> </li> <li> <a href="#">menu3</a> <ul class="hidden"> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> </ul> </li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </div> 

如果希望菜单具有position: absolute由于某些原因），请添加具有该位置的包装器

像这样：

 .menu-wrapper{ /*added*/ position: absolute; width: 100%; } ul { list-style-type:none; margin:0; padding:0; /*position: absolute;*/ /*removed*/ display: inline-block; /*added*/ } /*Create a horizontal list with spacing*/ li { display:inline-block; float: left; margin-right: 1px; } /*Style for menu links*/ li a { display:block; min-width:140px; height: 50px; text-align: center; line-height: 50px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; background: #2f3036; 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; } /*Hide checkbox*/ input[type=checkbox]{ display: none; -webkit-appearance: none; } /*Responsive Styles*/ @media screen and (max-width : 760px){ /*Make dropdown links appear inline*/ .menu-wrapper { position: static; display: none; } /*Create vertical spacing*/ li { margin-bottom: 1px; } /*Make all menu links full width*/ ul li, li a { width: 100%; } ul{ display: block; } /*Display 'show menu' link*/ .show-menu { display:block; } /*Show menu when invisible checkbox is checked*/ input[type=checkbox]:checked ~ .menu-wrapper{ /*added the .menu-wrapper selector*/ display: block; /*setting block at low resolution*/ } } 

 <div id="menuback" style="text-align:center"> <label for="show-menu" class="show-menu">Show Menu</label> <input type="checkbox" id="show-menu" role="button"> <div class="menu-wrapper"> <!--added awrapper--> <ul id="menu"> <li><a href="#">menu1</a></li> <li> <a href="#">menu2</a> <ul class="hidden"> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> </ul> </li> <li> <a href="#">menu3</a> <ul class="hidden"> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> </ul> </li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </div> </div> 

Answer 3

将此CSS添加到ul

ul {
  left: 50%;
  transform: translate(-50%,0);
}