[英]Vertically center material_icon in MaterializeCSS Navbar?
I have a website I'm building with the help of Materialize , and when I put <i class="material-icons valign-center">settings</i>
in a tab, it ends up looking like this: 我有一个正在借助Materialize建立的网站,当我将<i class="material-icons valign-center">settings</i>
放在选项卡中时,它最终看起来像这样:
And upon looking at the bounds for the icon, it seems that it goes past its enclosing tags, and is being centered in that spot, unlike the text in neighboring tags. 在查看图标的边界时,它似乎越过了其封闭的标签,并且正好位于该位置的中心,这与相邻标签中的文本不同。
In Chrome: 在Chrome中:
In Firefox (the following will also be in Firefox): 在Firefox中(以下也在Firefox中):
What the other text looks like: 其他文字如下所示:
Text snippet for the navbar: 导航栏的文本片段:
<nav class="nav-extended teal">
<div class="nav-wrapper">
<ul id="nav-mobile" class="left">
<li><a href="sass.html"><i class="material-icons">arrow_back</i></a></li>
</ul>
<a href="#" class="brand-logo"><i class="material-icons left" style="font-size: 1.5em;">access_time</i>
Classy
Clock</a>
<ul class="tabs tabs-transparent">
<li class="tab"><a class="active" href="#settings"><i class="material-icons valign-center">settings</i></a>
</li>
<li class="tab"><a href="#monday">Monday</a></li>
<li class="tab"><a href="#tuesday">Tuesday</a></li>
<li class="tab"><a href="#wednesday">Wednesday</a></li>
<li class="tab"><a href="#thursday">Thursday</a></li>
<li class="tab"><a href="#friday">Friday</a></li>
<li class="tab"><a href="#saturday">Saturday</a></li>
<li class="tab"><a href="#sunday">Sunday</a></li>
</ul>
</div>
</nav>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.