将菜单栏与文本和图标元素以及其外部的购物车图标垂直对齐

Question

我有一个包含文本项和搜索图标的菜单栏（

.main-navigation

）。此外，在此菜单栏旁边但在其外部有一个购物车图标 (

.site-header-cart

)。我需要这两个元素垂直对齐。购物车图标不能放在主菜单栏内。

虽然我在各处使用相同的填充、字体大小和行高，但购物车图标并未与其余图标垂直对齐。我知道我可以修改填充等，但是有没有一种通用的方法，无论使用什么字体大小和行高，都始终有效。

* {
  box-sizing: inherit;
}

body {
  color: #000;
  font-family: Arial, sans-serif;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 2;
}

ul, ol {
  margin: 0 auto 1.6em;
  padding: 0;
}

a {
  color: #888;
}

svg {
  max-width: 100%;
  fill: currentColor;
}

.header-navigation {
  display: flex;
}

.main-navigation ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding-left: 0;
  clear: both;
}

.main-navigation li,
.site-header-cart .cart-contents {
  font-size: 1.125rem;
}

.main-navigation a {
  display: inline-block;
  padding: 20px 15px;
  cursor: pointer;
  text-decoration: none;
  vertical-align: top;
  border: 1px solid blue;
}

.menu-item-object-product_search_icon .search-wrap {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  min-width: 250px;
}

.site-header-cart {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header-cart .cart-contents {
  display: inline-block;
  background-color: transparent;
  height: auto;
  width: auto;
  padding: 20px 0;
  font-size: 1.125rem;
  text-decoration: none;
  border: 1px solid red;
}

.site-header-cart .cart-contents .cart-button {
  position: relative;
  display: flex;
}

.site-header-cart .cart-contents .cart-button svg {
  display: inline-block;
}

.site-header-cart .cart-contents .cart-button .cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 15px;
  color: #fff;
  background-color: #000;
  border-radius: 100%;
  font-size: 0.563rem;
  line-height: 15px;
  text-align: center;
}

<div class="header-navigation">
  <nav id="site-navigation" class="main-navigation">
    <ul id="primary-menu" class="menu">
      <li class="menu-item"><a href="https://example.com/gallery/">Gallery</a></li>
      <li class="menu-item"><a href="https://example.com/contact/">Contact</a></li>
      <li class="menu-item"><a href="https://example.com/shop/">Shop</a></li>
      <li class="menu-item menu-item-object-product_search_icon"><a href="#" class="search-toggle"><svg class="svg-icon" width="20" height="20" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 19.6,21 13.3,14.7 Q 12.55,15.3 11.575,15.65 10.6,16 9.5,16 6.775,16 4.8875,14.1125 3,12.225 3,9.5 3,6.775 4.8875,4.8875 6.775,3 9.5,3 12.225,3 14.1125,4.8875 16,6.775 16,9.5 16,10.6 15.65,11.575 15.3,12.55 14.7,13.3 L 21,19.6 Z M 9.5,14 Q 11.375,14 12.6875,12.6875 14,11.375 14,9.5 14,7.625 12.6875,6.3125 11.375,5 9.5,5 7.625,5 6.3125,6.3125 5,7.625 5,9.5 5,11.375 6.3125,12.6875 7.625,14 9.5,14 Z"></path></svg></a><div class="search-wrap"><form role="search" method="get" class="woocommerce-product-search" action="https://example.com/">
        <label class="screen-reader-text" for="woocommerce-product-search-field-0">Search:</label>
        <input type="search" id="woocommerce-product-search-field-0" class="search-field" placeholder="Search products…" value="" name="s">
        <button type="submit" value="Buscar"><svg class="svg-icon" width="20" height="20" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 19.6,21 13.3,14.7 Q 12.55,15.3 11.575,15.65 10.6,16 9.5,16 6.775,16 4.8875,14.1125 3,12.225 3,9.5 3,6.775 4.8875,4.8875 6.775,3 9.5,3 12.225,3 14.1125,4.8875 16,6.775 16,9.5 16,10.6 15.65,11.575 15.3,12.55 14.7,13.3 L 21,19.6 Z M 9.5,14 Q 11.375,14 12.6875,12.6875 14,11.375 14,9.5 14,7.625 12.6875,6.3125 11.375,5 9.5,5 7.625,5 6.3125,6.3125 5,7.625 5,9.5 5,11.375 6.3125,12.6875 7.625,14 9.5,14 Z"></path></svg></button>
        <input type="hidden" name="post_type" value="product">
    </form></div></li>
    </ul>
  </nav><!-- .main-navigation -->
  <ul id="site-header-cart" class="site-header-cart">
    <li class="">
      <a class="cart-contents" href="https://example.com/cart/">
        <span class="cart-button">
          <svg class="svg-icon" width="20" height="20" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 7.499889,21 Q 6.7574042,21 6.2286651,20.47125 5.6999261,19.9425 5.6999261,19.2 5.6999261,18.4575 6.2286651,17.92875 6.7574042,17.4 7.499889,17.4 8.2423738,17.4 8.771113,17.92875 9.2998519,18.4575 9.2998519,19.2 9.2998519,19.9425 8.771113,20.47125 8.2423738,21 7.499889,21 Z M 16.499704,21 Q 15.757219,21 15.22848,20.47125 14.699741,19.9425 14.699741,19.2 14.699741,18.4575 15.22848,17.92875 15.757219,17.4 16.499704,17.4 17.242189,17.4 17.770928,17.92875 18.299667,18.4575 18.299667,19.2 18.299667,19.9425 17.770928,20.47125 17.242189,21 16.499704,21 Z M 6.7349048,6.6 8.8948603,11.1 H 15.194731 L 17.66968,6.6 Z M 5.8799223,4.8 H 19.15465 Q 19.672138,4.8 19.942133,5.2612499 20.212128,5.7225 19.964633,6.1949999 L 16.769698,11.955 Q 16.522203,12.405 16.105962,12.6525 15.689721,12.9 15.194731,12.9 H 8.4898688 L 7.499889,14.7 H 18.299667 V 16.5 H 7.499889 Q 6.4874098,16.5 5.9699205,15.611249 5.4524311,14.7225 5.9249213,13.845 L 7.1398964,11.64 3.899963,4.8 H 2.1 V 3 H 5.0249398 Z M 8.8948603,11.1 H 15.194731 Z"></path></svg>
          <span class="cart-badge">2</span>
        </span>
      </a>
    </li>
    <li>
      <div class="widget woocommerce widget_shopping_cart">
        <div class="widget_shopping_cart_content">
        </div>
      </div>
    </li>
  </ul>
</div>

Answer 1

我建议您看一下弹性框布局的这一部分：https://developer.mozilla.org/en-US/docs/Web/CSS/align-items?retiredLocale=de

将

display:flex

和

align-items:center

添加到您的“

header-navigation

”中。