0

as the title suggests, I wanted to know if it was possible to align the text within a navbar so that it is perfectly in the center of the other elements.

This is the preview of the content

This is the React code:

<div id="navbar">  
  <img id="logo2" src="https://lh3.googleusercontent.com/pw/AM-JKLUOMjBkAFP09cJASkvDN8kBOTopRcpnB7KSEIZ7pzzaB0IEJ6szStbNWv57giJqBa2HlsgD29OllpdTI_Sx0QynCJL28hxGO68eItQP4Y4gMQk4Kxx88R8fz_TJsOQktL5H_8bVBVh_pv-148P6y_4=w700-h250-no?authuser=0"/>
  <ul>
    <li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg></li>
  
  <div class="dropdown">  
 <li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle-fill" viewBox="0 0 16 16">
  <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
</svg></li>
     <div class="dropdown-content">
      <a href="#">Discover, collect, and sell extraordinary NFTs on the world's first & largest NFT marketplace</a>
      </div>
      </div>
    
    <div class="dropdown">
    <li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bell" viewBox="0 0 16 16"><path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"/>  
</svg></li>
      <div class="dropdown-content">
      <a href="#">You have 0 notifications</a>
      </div>
      </div>
    
    <div class="dropdown">
      <li id="user"><img src="https://assets.codepen.io/6991406/internal/avatars/users/default.png?fit=crop&format=auto&height=512&version=1635060458&width=512" id="avatar"/>{this.props.dataFromParent}</li>
    <div class="dropdown-content">
    <a href="#" onClick={this.props.dataFromParent2}>Logout</a>
      </div>
      </div>
  </ul>

and this is the CSS:

#avatar {
  width: 30px;
  border-radius: 10px;
  margin-right: 10px;
}

#user {
  vertical-align: middle;
}

#navbar {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  align-items: center;
  justify-content: space-between;
  text-align: right;
}

ul {
  margin-left: auto;
  display: inline-block;
  padding: 20px;
}

li {
  font-family: Arial;
    font-size: 14px;
    font-weight: 800;
    color: white;
    text-transform: none;
    font-style: normal;
    text-decoration: none;
    line-height: 2em;
    letter-spacing: 0px;
    display: inline;
    padding: 80px;
    cursor: pointer;
}

#avatar is the image near the "name to edit"

This part:

#user {
      vertical-align: middle;
    }

makes every part of the navbar vertical aligned in the middle except for the "Name to edit".

ElsaKarami
  • 624
  • 1
  • 4
  • 14
HoneyGrim
  • 21
  • 2

1 Answers1

0

Limitless helpful guides to using CSS Flexbox. Chrome DevTools lets you play around with the different properties as well.

enter image description here

CSS

.flex-between-align-center {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.flex-align-center {
   display: flex;
   justify-content: flex-start;
   align-items: center;
}

HTML

<div class="flex-between-align-center">
    <i class="fas fa-info-circle"></i>
    <i class="fas fa-bell-on"></i>
    <div class="flex-align-center">
        <img src=""></img>
        <label>Text</label>
    </div>
</div>
chri3g91
  • 1,196
  • 14
  • 16