如何解决导航栏中的中心头像
我在这里开发这个网站: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>
解决方法
你在这里可以做的是将你的导航分成两部分并使用弹性框。
<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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。