如何解决与导航栏中文本行高相同的徽标图像
我正在尝试将我的徽标与导航栏中的文本置于同一行高。这是我的意思的一个例子:https://try.talkspace.com
它不是徽标的大小,因为我尝试了一个非常小的徽标,并且它到了底部。我还尝试为它创建单独的徽标类,vertical-align: middle 并尝试将其居中。
<!-- Navigation Bar -->
<div class="nav_main">
<h2 class="nav_main_logo"><img src="fca.svg" class="nav_main_logo"></h2>
<input type="checkBox" id="chk">
<label for="chk" class="show-menu-btn">
<i class="fa fa-bars"></i>
</label>
<ul class="nav_menu_main">
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">Resources</a>
<a href="#">Employment</a>
<a href="#">The Team</a>
<label for="chk" class="hide-menu-btn">
<i class="fa fa-times"></i>
</label>
</ul>
</div>
@import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
*{
margin: 0;
padding: 0;
text-decoration: none;
}
.nav_main {
height: 100px;
background-color: #fff;
padding: 0 20px;
color: red;
}
.nav_main_logo {
line-height: 100px;
float: left;
text-transform: uppercase;
vertical-align: middle;
}
.nav_menu_main {
float: right;
line-height: 100px;
}
.nav_menu_main a {
color: #005368;
text-transform: uppercase;
padding: 0 10px;
transition: 0.4s;
font-family: 'Sriracha',cursive;
}
.show-menu-btn,.hide-menu-btn {
transition: 0.4s;
font-size: 30px;
cursor: pointer;
display: none;
}
.show-menu-btn {
float: right;
}
.show-menu-btn i {
line-height: 100px;
}
/* Todo: Active tab
.nav_menu_main a.active
Todo: .hover */
.show-menu-btn:hover,.hide-menu-btn:hover {
color: blue;
}
#chk {
position: absolute;
visibility: hidden;
z-index: -1111;
}
@media screen and (max-width:800px) {
.show-menu-btn,.hide-menu-btn {
display: block;
}
.nav_menu_main {
position: fixed;
width: 100%;
height: 100vh;
background: #333;
right: -100%;
top: 0;
text-align: center;
padding: 80px 0;
line-height: normal;
transition: 0.7s;
}
.nav_menu_main a {
display: block;
padding: 20px;
}
.hide-menu-btn {
position: absolute;
top: 40px;
right: 40px;
}
#chk:checked ~ .nav_menu_main {
right: 0;
}
}
解决方法
尝试在 inline-block
或 inline
上显示,然后在 vertical-align: middle
上显示 nav_main_logo。
这通常可以解决我的问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。