导航栏内的中心化身

Question

我在这里开发这个网站：bottlesbeach.eu 现在我试图将个人资料图片头像置于导航栏的中心： The image is not centered

我尝试使用：

vertical-align: middle

但是正如您从图片中看到的那样，我的头像继续固定在顶部。

你有什么解决办法吗？

导航栏：

.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>

Answer 1

您在这里可以做的是将导航分成两部分并使用弹性框。

<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>

样式

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

导航栏内的中心化身

Center avatar inside navbar

html

css

frontend

vertical-alignment