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

【问题标题】：adjust wordpress menu so items are vertically centered调整 wordpress 菜单，使项目垂直居中
【发布时间】：2020-01-14 22:22:27
【问题描述】：

我正在尝试自定义 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>

【问题讨论】：

标签： css responsive-design menu vertical-alignment

【解决方案1】：

您需要删除icon 类.fa 的margin 并需要更新li 的line-height 以使其居中检查sn-p。

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

/*! 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: 29px;
  }
  .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;
  }
  .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>

【讨论】：

这是在正确的轨道上，但仍然没有真正起作用。 line-height 需要在没有 px 的情况下表示，因此它会随着窗口宽度的减小而缩小，并且项目不会真正保持居中