我在放置自定义图像徽标时遇到问题,我希望将其完美地放置在导航栏中,但是在移动视图和桌面视图中却有些偏离。 Mobile view
我尝试使用vertical-align: middle;
的台式机版本也有点过时,但是它不能正常工作。
示例:
.logo {
display: inline-block;
height: 100%;
}
.logo>img {
vertical-align: middle;
position: relative;
top:1px;
}
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<div class="navbar-fixed">
<nav class="blue darken-1">
<div class="container">
<div class="nav-wrapper">
<a href="#Main" class="logo">
<img src="https://i.imgur.com/sFliVuL.png" >
</a> <a class="sidenav-trigger" data-target="mobile-demo" href="#"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li>
<a class="waves-effect" href="#home">Home</a>
</li>
<li>
<a class="waves-effect" href="#info">Info</a>
</li>
<li>
<a class="waves-effect" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="waves-effect" href="#links">Social</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<ul class="sidenav" id="mobile-demo">
<li class="user-view">
<div class="background"><img alt="tokyo" src="img/navmenu.jpg"></div>
<div class="wow zoomIn"><img alt="me" class="circle" src="img/me.jpg"></div><a href="#"><span class="white-text name">Edgar</span></a> <a href="mailto:edgar@teamhusky.net"><span class="white-text email">edgar@teamhusky.net</span></a>
</li>
答案 0 :(得分:0)
vertical-align: middle
仅适用于带有display: table-cell
的元素。但是,还有一些更好的方法。
尝试结合使用绝对定位和垂直居中对齐:
.logo {
display: inline-block;
height: 100%;
}
.logo>img {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<div class="navbar-fixed">
<nav class="blue darken-1">
<div class="container">
<div class="nav-wrapper">
<a href="#Main" class="logo">
<img src="https://i.imgur.com/sFliVuL.png" >
</a> <a class="sidenav-trigger" data-target="mobile-demo" href="#"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li>
<a class="waves-effect" href="#home">Home</a>
</li>
<li>
<a class="waves-effect" href="#info">Info</a>
</li>
<li>
<a class="waves-effect" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="waves-effect" href="#links">Social</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<ul class="sidenav" id="mobile-demo">
<li class="user-view">
<div class="background"><img alt="tokyo" src="img/navmenu.jpg"></div>
<div class="wow zoomIn"><img alt="me" class="circle" src="img/me.jpg"></div><a href="#"><span class="white-text name">Edgar</span></a> <a href="mailto:edgar@teamhusky.net"><span class="white-text email">edgar@teamhusky.net</span></a>
</li>