Question

我正在尝试自定义Wordpress菜单。这几乎是我需要的地方，但我遇到了一个主要问题。如何将菜单项（单词和图像）垂直居中放置，以便它们在浅蓝色背景中完美居中。

确保查看整个页面。这需要响应，以便窗口调整菜单项的大小时保持垂直居中。

/*! CSS Used from: https://www.sustainablewestonma.org/wp-content/themes/twentytwelve/style.css?ver=5.2.3 ; media=all */
@media all{
div,a,img,ul,li,nav{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;}
ul{list-style:none;}
a:focus{outline:thin dotted;}
nav{display:block;}
img{border:0;-ms-interpolation-mode:bicubic;}
button{border:1px solid #ccc;border-radius:3px;font-family:inherit;padding:6px;padding:0.428571429rem;}
button{line-height:normal;}
.menu-toggle{padding:6px 10px;padding:0.428571429rem 0.714285714rem;font-size:11px;font-size:0.785714286rem;line-height:1.428571429;font-weight:normal;color:#7c7c7c;background-color:#e6e6e6;background-repeat:repeat-x;background-image:-moz-linear-gradient(top, #f4f4f4, #e6e6e6);background-image:-ms-linear-gradient(top, #f4f4f4, #e6e6e6);background-image:-webkit-linear-gradient(top, #f4f4f4, #e6e6e6);background-image:-o-linear-gradient(top, #f4f4f4, #e6e6e6);background-image:linear-gradient(to bottom, #f4f4f4, #e6e6e6);border:1px solid #d2d2d2;border-radius:3px;box-shadow:0 1px 2px rgba(64, 64, 64, 0.1);}
.menu-toggle,button{cursor:pointer;}
.menu-toggle:hover,.menu-toggle:focus,button:hover{color:#5e5e5e;background-color:#ebebeb;background-repeat:repeat-x;background-image:-moz-linear-gradient(top, #f9f9f9, #ebebeb);background-image:-ms-linear-gradient(top, #f9f9f9, #ebebeb);background-image:-webkit-linear-gradient(top, #f9f9f9, #ebebeb);background-image:-o-linear-gradient(top, #f9f9f9, #ebebeb);background-image:linear-gradient(to bottom, #f9f9f9, #ebebeb);}
.menu-toggle:active,button:active{color:#757575;background-color:#e1e1e1;background-repeat:repeat-x;background-image:-moz-linear-gradient(top, #ebebeb, #e1e1e1);background-image:-ms-linear-gradient(top, #ebebeb, #e1e1e1);background-image:-webkit-linear-gradient(top, #ebebeb, #e1e1e1);background-image:-o-linear-gradient(top, #ebebeb, #e1e1e1);background-image:linear-gradient(to bottom, #ebebeb, #e1e1e1);box-shadow:inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4;border-color:transparent;}
a{outline:none;color:#21759b;}
a:hover{color:#0f3647;}
.assistive-text{position:absolute!important;clip:rect(1px, 1px, 1px, 1px);overflow:hidden;height:1px;width:1px;}
.main-navigation .assistive-text:focus{background:#fff;border:2px solid #333;border-radius:3px;clip:auto!important;color:#000;display:block;font-size:12px;height:auto;padding:12px;position:absolute;top:5px;left:5px;width:auto;z-index:100000;}
.main-navigation{margin-top:24px;margin-top:1.714285714rem;text-align:center;}
.main-navigation li{margin-top:24px;margin-top:1.714285714rem;font-size:12px;font-size:0.857142857rem;line-height:1.42857143;}
.main-navigation a{color:#5e5e5e;}
.main-navigation a:hover,.main-navigation a:focus{color:#21759b;}
.main-navigation ul.nav-menu{display:none;}
.menu-toggle{display:inline-block;}
@media screen and (min-width: 600px){
.main-navigation ul.nav-menu{border-bottom:1px solid #ededed;border-top:1px solid #ededed;display:inline-block!important;text-align:left;width:100%;}
.main-navigation ul{margin:0;text-indent:0;}
.main-navigation li a,.main-navigation li{display:inline-block;text-decoration:none;}
.main-navigation li a{border-bottom:0;color:#6a6a6a;line-height:3.692307692;text-transform:uppercase;white-space:nowrap;}
.main-navigation li a:hover,.main-navigation li a:focus{color:#000;}
.main-navigation li{margin:0 40px 0 0;margin:0 2.857142857rem 0 0;position:relative;}
.main-navigation .current-menu-item > a,.main-navigation .current_page_item > a{color:#636363;font-weight:bold;}
.menu-toggle{display:none;}
}
@media print{
a{text-decoration:none;}
.main-navigation{display:none;}
}
}
/*! CSS Used from: https://www.sustainablewestonma.org/?display_custom_css=css&ver=5.2.3 ; media=all */
@media all{
.fa{padding:1vw;padding-right:1.75vw;font-size:1.25vw!important;width:2.5vw;text-align:center;text-decoration:none;margin:.25vw .1vw;}
.fa:hover{opacity:0.7;}
@media screen and (min-width: 60px){
.menu-toggle{display:none;}
}
@media screen and (min-width: 60px){
.main-navigation ul.nav-menu{border-bottom:1px solid #ededed;border-top:1px solid #ededed;display:inline-block!important;text-align:right;width:100%;}
}
@media screen and (min-width: 60px){
.main-navigation li{margin:0 2vw 0 0;position:relative;}
}
@media screen and (min-width: 60px){
.main-navigation li a,.main-navigation li{display:inline-block;text-decoration:none;}
}
@media screen and (min-width: 60px){
.main-navigation li a{border-bottom:0;color:#6a6a6a;line-height:3.692307692;text-transform:uppercase;white-space:nowrap;}
}
.menu-item-type-custom{float:left;height:0;}
.menu-item{font-size:1.5vw!important;}
.main-navigation{margin:0!important;}
#menu-1{background-color:#b3d7f7;}
#menu-1 a{height:0;}
}
/*! CSS Used from: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css */
.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
/*! CSS Used fontfaces */
@font-face{font-family:'FontAwesome';src:url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');src:url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot#iefix&v=4.7.0') format('embedded-opentype'),url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal;}

<nav id="site-navigation" class="main-navigation" role="navigation">
			<button class="menu-toggle">Menu</button>
			<a class="assistive-text" href="#content" title="Skip to content">Skip to content</a>
			<div class="menu-1-container"><ul id="menu-1" class="nav-menu"><li id="menu-item-35" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-35"><a href="https://google.com"><img class="fa facebook" src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/facebook-square-brands-blue.png" scale="0"></a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-11 current_page_item menu-item-25"><a href="https://www.sustainablewestonma.org/home/" aria-current="page">Home</a></li>
<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="https://www.sustainablewestonma.org/our-story/">Our Story</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="https://www.sustainablewestonma.org/calendar/">Calendar</a></li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="https://www.sustainablewestonma.org/our-work/">Our Work</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="https://www.sustainablewestonma.org/resources/">Resources</a></li>
</ul></div>		</nav>

Answer 1

您需要删除margin类icon的{{1}}，并且需要更新.fa的{{1}}以使其成为中心检查代码段。

line-height

li

.main-navigation li {
    line-height: 29px;
  }

调整wordpress菜单，使项目垂直居中

1 个答案: