0

I am developing this site here: bottlesbeach.eu Now I'm trying to center the profile picture avatar inside the navbar: The image is not centered

I tried to use:

vertical-align: middle

But as you can see from the image, my avatar continues to remain anchored at the top.

Do you have any ideas to solve this?

Navbar:

.avatar {
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  float: right;
  vertical-align: middle;
}
 <div class="topnav" id="myTopnav"> 
  <a href="#" class="active">Send a Bottle</a>
  <a href="bottles.php">Bottles</a>
  <a href="cht.php" >Chat</a>
  <a href="about.php">About</a>
  <a href="donate.php">Donate</a>
  <a href="login.php" id="ahr" class="rgs">Log-in</a>
  <a style="float:right; vertical-align: middle;" id="ahr2"></a> <img style="float:right;" src="photo/avatar/img_avatar.png" alt="Avatar" class="avatar">
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
  <i class="fa fa-bars"></i>
  </a>
</div>
<div class="bg-image"></div>
Ali Esmailpor
  • 1,209
  • 3
  • 11
  • 22
bottles beach
  • 33
  • 6

1 Answers1

0

What you can do here is divide your navigation into two parts and use flex box.

<div class="topnav" id="myTopnav">
  <div>
    <a href="#" class="active">Send a Bottle</a>
    <a href="bottles.php">Bottles</a>
    <a href="cht.php" >Chat</a>
    <a href="about.php">About</a>
    <a href="donate.php">Donate</a>
    <a href="login.php" id="ahr" class="rgs">Log-in</a>
  </div>
  <div>
    <a style="float:right; vertical-align: middle;" id="ahr2"></a> 
      <img 
       style="float:right;" src="photo/avatar/img_avatar.png" alt="Avatar" 
       class="avatar"
      >
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>
</div>
<div class="bg-image"></div>

Styles

.topnav{
  display:flex;
  justify-content: space-between;
  align-items:center;
}
Mohib Arshi
  • 830
  • 4
  • 13