Question

我在放置自定义图像徽标时遇到问题，我希望将其完美地放置在导航栏中，但是在移动视图和桌面视图中却有些偏离。 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>

Answer 1

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>

Materializecss导航栏徽标图像位置

1 个答案: