如何將中間（水平）的 header 的文本與圖標對齊？ （彈性盒）

Question

這是我想要歸檔的圖片：

我希望水平中間的文本與圖標對齊。 我已經嘗試過在 CSS 中使用 align-items 標簽的東西，但是它弄亂了我的代碼，如何在不弄亂圖標的情況下實現我想要的外觀？ 因為這是我嘗試使用 align items 標簽執行此操作時發生的示例

對齊項目中心

對齊項目基線

我的代碼：

<header>
  <div class="header-text">
    <h1 class="titulo-logo">NeoKisa</h1>
  </div>
  <nav>
    <img
      class="header-icons"
      src="/icons/header_bell.svg"
      alt="Notificaciones"
    />
    <img
      class="header-icons"
      src="/icons/header_user.svg"
      alt="Mi Perfil"
    />

    <span class="header-text">Vender</span>
    <span class="header-text">Publicaciones</span>

    <img
      src="/icons/header_detail.svg"
      alt="Detalles"
      class="header-icons"
    />
  </nav>
</header>

我的 css：

body {
        margin: 0px;
        padding: 0px;
        font-family: roboto;
      }
  .header-text {
    position: relative;
    margin: 2px 6px 2px 4px;
    cursor: pointer;
  }
  .header-icons {
    width: 32px;
    margin: 2px 0px 2px 0px;
    cursor: pointer;
  }
  header {
    display: flex;
    justify-content: space-between;
    background-color: rgb(20, 33, 61);
    color: white;
    height: 30px;
    align-items: center;
    padding: 6px;
  }

謝謝你，對不起我的英語不好。 我只是一個初學者，所以我真的很困惑......我會感謝你的幫助

Answer 1

您需要將 flex 類型添加到導航元素。

我認為這將解決您的問題

nav{
display: flex;
    align-items: center;

}