如何将移动菜单的内容居中？

Question

他们向左对齐，显然我不够聪明，无法弄清楚这一点。 通常，我将如何更改其对齐方式？ 例如居中吗？

另外，如果我想在屏幕小于950 px的情况下扩展每个项目的大小，那么我可以将其作为CSS的相关媒体查询部分下的条件格式，对吗？

 $(document).ready(function() { $(document).bind("contextmenu", function(e) { if (e.target.nodeName == 'IMG') { //context menu attempt on top of an image element return false; } }); //dropdown nav $("#nav").addClass("js"); $("#nav").addClass("js").before('<div id="menu">☰</div>'); $("#menu").click(function() { $("#nav").toggle(); }); $(window).resize(function() { if (window.innerWidth > 950) { $("#nav").removeAttr("style"); } }); }); 

 html, body { font-family: Georgia, Times, "Times New Roman", serif; font-size: 12px; color: #c5e8ea; background-color: #000000; margin: 0; padding: 0; -webkit-font-smoothing: antialiased !important; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); } .hidden { display: none; } p { text-align: justify; } #header { position: fixed; margin: 0; padding: 4px; float: left; margin-top: 0px; z-index: 1; } #navmain { position: fixed; top: 0px; width: 100%; height: 75px; margin-top: 0px; font-family: 'Cedarville Cursive', cursive; font-size: 25px; color: #E5E5E5; background-color: #000000; box-shadow: ; padding: 0px; z-index: 1; opacity: .8; } h1 { margin: 0; margin-left: 15px; margin-top: 0px; padding: 0; float: left; opacity: ; color: #E5E5E5; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } ul.navmain { list-style-type: none; margin: 0; padding: 0; overflow: hidden; float: right; } li.navmain { float: left; } a.navmain:link, a.navmain:visited { display: block; height: 75px; width: 110px; font-family: 'Old Standard TT', serif; font-size: 23px; color: #E5E5E5; background-color: #000000; text-align: center; line-height: 95px; padding: 0px; text-decoration: none; text-transform: lowercase; } a.navmain:hover, a.navmain:active { background-color: #181818; } .active { background-color: #0b0b0a; } #content1 { position: absolute; width: 100%; height: 100%; background-color: #000000; background-image: url("../img/bg.jpg"); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; -webkit-animation: fadein 6s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein 6s; /* Firefox < 16 */ -ms-animation: fadein 6s; /* Internet Explorer */ -o-animation: fadein 6s; /* Opera < 12.1 */ animation: fadein 6s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Firefox < 16 */ @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Safari, Chrome and Opera > 12.1 */ @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Internet Explorer */ @-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Opera < 12.1 */ @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } #content2 { position: absolute; width: 60%; height: 100%; background-color: #000000; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } #content2 h1 { margin-top: 95px; padding: 10px; font-size: 40px; font-family: 'Source Sans Pro', sans-serif; } #content2 p { margin-top: 10px; margin-left: 45px; margin-right: 45px; font-size: 16px; font-family: 'Source Sans Pro', sans-serif; float: left; } #content3 { float: right; width: 40%; height: 100%; } #content3 img {} #footer { clear: both; height: 15px; font-family: 'Source Sans Pro', sans-serif; font-size: 12px; color: #E5E5E5; border-top: 1 px solid #efefef; padding: 8px 10px; line-height: 15px; background-color: #0b0b0a; } #footer a { color: #E5E5E5; text-decoration: none; } #footer a:hover { Color: #db6d16 } #footer #altnav { width: 350px; float: right; text-align: right; } /* dropdown nav */ @media screen and (max-width: 950px) { #menu { width: 1.4em; display: block; background: ; font-size: 1.35em; text-align: center; float: right; } #nav.js { display: none; } ul { width: 100%; overflow: hidden; background-color: #000000; } li { width: 100%; border-right: none; } #content2 { position: absolute; width: 100%; height: 100%; background-color: #000000; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } #content2 h1 { margin-top: 95px; padding: 10px; font-size: 40px; font-family: 'Source Sans Pro', sans-serif; } } @media screen and (min-width: 950px) { #menu { display: none; } } /* dropdown nav */ 

 <style> @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:700'); </style> <style> @import url('https://fonts.googleapis.com/css?family=Cedarville+Cursive'); </style> <style> @import url('https://fonts.googleapis.com/css?family=Old+Standard+TT:400i'); </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div id="navmain"> <div id="header"> <a href="#"> <h1>Some Dude</h1> </a> </div> <ul class="navmain" id="nav"> <li class="navmain"><a class="navmain" href="#">fauna</a></li> <li class="navmain"><a class="navmain" href="#">flora</a></li> <li class="navmain"><a class="navmain" href="#">scenic</a></li> <li class="navmain"><a class="navmain" href="#">urban</a></li> <li class="navmain"><a class="navmain" href="#">about</a></li> <li class="navmain"><a class="navmain" href="#">contact</a></li> </ul> </div> <div id="content1"> </div> 

Answer 1

设置边距。

a.navmain:link, a.navmain:visited {
    margin: 0 auto;
}

新的代码段：

 html, body{ font-family: Georgia, Times, "Times New Roman", serif; font-size: 12px; color: #c5e8ea; background-color:#000000; margin: 0; padding: 0; -webkit-font-smoothing: antialiased !important; text-shadow: 1px 1px 1px rgba(0,0,0,0.004); } .hidden { display: none; } p { text-align: justify; } #header { position:fixed; margin: 0; padding: 4px; float: left; margin-top: 0px; z-index:1; } #navmain { position: fixed; top: 0px; width: 100%; height:75px; margin-top: 0px; font-family: 'Cedarville Cursive', cursive; font-size:25px; color:#E5E5E5; background-color: #000000; box-shadow: ; padding: 0px; z-index:1; opacity:.8; } h1 { margin:0; margin-left:15px; margin-top:0px; padding: 0; float: left; opacity:; color:#E5E5E5; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } ul.navmain { list-style-type: none; margin: 0; padding: 0; overflow: hidden; float:right; } li.navmain { float:left; } a.navmain:link,a.navmain:visited { margin: 0 auto; display:block; height:75px; width:110px; font-family: 'Old Standard TT', serif; font-size: 23px; color:#E5E5E5; background-color:#000000; text-align:center; line-height:95px; padding:0px; text-decoration:none; text-transform:lowercase; } a.navmain:hover,a.navmain:active { background-color:#181818; } .active { background-color: #0b0b0a; } #content1 { position: absolute; width: 100%; height: 100%; background-color: #000000; background-image: url("../img/bg.jpg"); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; -webkit-animation: fadein 6s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein 6s; /* Firefox < 16 */ -ms-animation: fadein 6s; /* Internet Explorer */ -o-animation: fadein 6s; /* Opera < 12.1 */ animation: fadein 6s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Firefox < 16 */ @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Safari, Chrome and Opera > 12.1 */ @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Internet Explorer */ @-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Opera < 12.1 */ @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } #content2 { position:absolute; width: 60%; height: 100%; background-color: #000000; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } #content2 h1 { margin-top:95px; padding:10px; font-size: 40px; font-family: 'Source Sans Pro', sans-serif; } #content2 p { margin-top:10px; margin-left:45px; margin-right:45px; font-size: 16px; font-family: 'Source Sans Pro', sans-serif; float:left; } #content3 { float:right; width:40%; height:100%; } #content3 img { } #footer { clear: both; height: 15px; font-family: 'Source Sans Pro', sans-serif; font-size: 12px; color: #E5E5E5; border-top: 1 px solid #efefef; padding: 8px 10px; line-height: 15px; background-color:#0b0b0a; } #footer a { color: #E5E5E5; text-decoration: none; } #footer a:hover { Color: #db6d16 } #footer #altnav { width: 350px; float: right; text-align: right; } /* dropdown nav */ @media screen and (max-width: 950px) { #menu { width:1.4em; display: block; background:; font-size:1.35em; text-align: center; float:right; } #nav.js { display: none; } ul { width:100%; overflow: hidden; background-color:#000000; } li { width:100%; border-right:none; } #content2 { position:absolute; width: 100%; height: 100%; background-color: #000000; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } #content2 h1 { margin-top:95px; padding:10px; font-size: 40px; font-family: 'Source Sans Pro', sans-serif; } } @media screen and (min-width: 950px) { #menu { display: none; } } /* dropdown nav */ 

 <!DOCTYPE html> <html> <head> <title>| Home</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1"> <style>@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:700');</style> <style>@import url('https://fonts.googleapis.com/css?family=Cedarville+Cursive');</style> <style>@import url('https://fonts.googleapis.com/css?family=Old+Standard+TT:400i');</style> <style type="text/css" media="all">@import "css/master.css";</style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(document).bind("contextmenu",function(e){ if(e.target.nodeName == 'IMG'){ //context menu attempt on top of an image element return false; } }); //dropdown nav $("#nav").addClass("js"); $("#nav").addClass("js").before('<div id="menu">☰</div>'); $("#menu").click(function(){ $("#nav").toggle(); }); $(window).resize(function(){ if(window.innerWidth > 950) { $("#nav").removeAttr("style"); } }); }); </script> </head> <body> <div id="navmain"> <div id="header"> <a href="#"><h1>Some Dude</h1></a> </div> <ul class="navmain" id="nav"> <li class="navmain"><a class="navmain" href="#">fauna</a></li> <li class="navmain"><a class="navmain" href="#">flora</a></li> <li class="navmain"><a class="navmain" href="#">scenic</a></li> <li class="navmain"><a class="navmain" href="#">urban</a></li> <li class="navmain"><a class="navmain" href="#">about</a></li> <li class="navmain"><a class="navmain" href="#">contact</a></li> </ul> </div> <div id="content1"> </div> </body> </html>