[英]How to center align an ICON inside a BUTTON in materialize css navbar?
I read many post on SO about how to center align an ICON inside a BUTTON, but none of them work for my case, since in my case the BUTTON is inside a navbar.我在 SO 上阅读了许多关于如何在 BUTTON 内居中对齐 ICON 的帖子,但它们都不适用于我的情况,因为在我的情况下,BUTTON 位于导航栏内。
Please see the code in jsfiddle , also pasted in the code block below.请参阅jsfiddle中的代码,也粘贴在下面的代码块中。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="navbar-fixed">
<nav class="teal">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="brand-logo">LOGO </a>
<ul class="right hide-on-med-and-down">
<li>
<form class="orange" style="">
<div style="display: inline-flex; border: 1px black solid; align-items: center;">
<input id="search-bar" type="search" placeholder="text text..." style="border: 1px red solid; margin: 0; height: 100%;">
<button class="btn" type="submit" style="background: blue; height:45px;">
<i class="material-icons" style="border: 1px red solid; display: inline; margin: auto;">search</i>
</button>
</div>
</form>
</li>
<li>
<a href="#home">Home</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
The issue is that, the search ICON is not vertically centered inside BUTTON, and I tried many suggested methods, none worked.问题是,搜索 ICON 不在 BUTTON 内垂直居中,我尝试了许多建议的方法,但都没有奏效。
Please help!请帮忙!
if your navbar has fixed height this css is enough for u https://jsfiddle.net/fw9cmaq6/如果您的导航栏具有固定高度,则此 css 对您来说足够https://jsfiddle.net/fw9cmaq6/
.material-icons{
margin-top:-8px;
}
if not fixed height just use this如果不是固定高度,只需使用它
.material-icons{
display: table-cell !important;
vertical-align: middle;
line-height:0 !important;
height:100% !important;
}
You have just to add line-height: 45px
to your icon
, scince you added the height:45px;
您只需将line-height: 45px
添加到您的icon
,因为您添加了height:45px;
to your button, just like this:到你的按钮,就像这样:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="navbar-fixed">
<nav class="teal">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="brand-logo">LOGO </a>
<ul class="right hide-on-med-and-down">
<li>
<form class="orange" style="">
<div style="display: inline-flex; border: 1px black solid; align-items: center;">
<input id="search-bar" type="search" placeholder="text text..." style="border: 1px red solid; margin: 0; height: 100%;">
<button class="btn" type="submit" style="background: blue; height:45px;">
<i class="material-icons" style="border: 1px red solid; display: inline; margin: auto;line-height:45px;">search</i>
</button>
</div>
</form>
</li>
<li>
<a href="#home">Home</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
You can fix it by adjusting the margin for the search div in your code.您可以通过调整代码中搜索 div 的边距来修复它。 Hope this helps.希望这可以帮助。 I have fixed it in your code.我已经在你的代码中修复了它。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="navbar-fixed"> <nav class="teal"> <div class="container"> <div class="nav-wrapper"> <a href="#" class="brand-logo">LOGO </a> <ul class="right hide-on-med-and-down"> <li> <form class="orange" style=""> <div style="display: inline-flex; border: 1px black solid; align-items: center;"> <input id="search-bar" type="search" placeholder="text text..." style="border: 1px red solid; margin: 0; height: 100%;"> <button class="btn" type="submit" style="background: blue; height:45px;"> <div style="margin-top: -9px;"> <i class="material-icons" style="border: 1px red solid; display: inline; ">search</i> </div> </button> </div> </form> </li> <li> <a href="#home">Home</a> </li> </ul> </div> </div> </nav> </div>
You can check this(View in full screen)你可以检查这个(全屏查看)
#container { height: 65px; display: flex; } #search-bar { height: 100%; } button.btn { height: auto;important. }:material-icons { vertical-align; middle: justify-content; center: align-items; center; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="navbar-fixed"> <nav class="teal"> <div class="container"> <div class="nav-wrapper"> <a href="#" class="brand-logo">LOGO </a> <ul class="right hide-on-med-and-down"> <li> <form class="orange"> <div id="container"> <input id="search-bar" type="search" placeholder="text text..."> <button class="btn" type="submit" style="background: blue; height:45px;"> <i class="material-icons">search</i> </button> </div> </form> </li> <li> <a href="#home">Home</a> </li> </ul> </div> </div> </nav> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.