导航栏内的中心头像[重复]答案

【问题标题】：Center avatar inside navbar [duplicate]导航栏内的中心头像[重复]
【发布时间】：2024-04-28 22:55:02
【问题描述】：

我正在这里开发这个网站：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>

【问题讨论】：

我试图粘贴答案的css，但如果我使用它，头像就会消失

标签： html css frontend vertical-alignment

【解决方案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;
}

【讨论】：