How can I align the text of my header in the middle (horizontally) with icons? (flexbox)-CodePudding

here's a pic of what I want to archieve:

I want the text in the horizontal middle aligned with the icons. I have tried stuff as using align-items tag in CSS but it messes up my code, how can I achieve this look that I want without making my icons mess up? Because here's an example of what happens when I try to do it with align items tag

align items center

align items baseline

my code:

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

    <span >Vender</span>
    <span >Publicaciones</span>

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

my 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;
  }

Thank you and sorry my bad English! I'm just a beginner so I'm really confused... I will appreciate your kind help

CodePudding user response：

You need add flex type to nav element.

I think this will solve your problem

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

}