我一直在尝试使用带有3个链接的MaterialiseCSS进行某种导航,每个链接都是导航栏宽度的33%,我希望将文本置于链接中心(甚至是图标)
如果我没有放左或右类,文本和图标不会保持在同一行...但是如果我把左类放到图标然后它浮动到左边,因此给出了navbar宽度:100%,图标和文本之间的空间太大。
这是HTML
<div id="secondary-navbar"><nav>
<div class="nav-wrapper">
<ul>
<li>
<a href="#!">
<i class="material-icons left">event</i>Calendario
</a>
</li>
<li>
<a href="#!">
<i class="material-icons left">location_on</i>Mapa
</a>
</li>
<li>
<a href="#!">
<i class="material-icons left">apps</i>Galería
</a>
</li>
</ul>
</div>
</nav></div>
和CSS
#secondary-navbar nav
{
background:#ffffff;
}
#secondary-navbar nav .nav-wrapper ul li a
{
font-size:1.2em;
}
#secondary-navbar nav .nav-wrapper ul li a .material-icons
{
font-size:1.2em;
margin-right:0.2em;
}
#secondary-navbar nav .nav-wrapper ul li a,
#secondary-navbar nav .nav-wrapper ul li a .material-icons
{
color:#06207d;
}
#secondary-navbar nav .nav-wrapper ul li
{
width:33%;
}
#secondary-navbar nav .nav-wrapper ul li:nth-child(3)
{
width:34%;
}
这是一个jsfiddle,我尝试使用内联块来显示图标,但随后导航栏的高度超过56px ...... https://jsfiddle.net/4aednm5d/
您对如何解决这个问题有任何想法吗?
答案 0 :(得分:8)
我通常使用这个:
.icon-align {
vertical-align: text-bottom;
}
<i class="material-icons md-18 icon align">check_circle</i>Auto Accepted</div>`
答案 1 :(得分:3)
使用
text-align: center;
用于对齐父级中心的文本和图标。
答案 2 :(得分:1)
我希望这个解决方案对另一个解决方案很有帮助,你们都是对的:将图标居中的方式是文本对齐:居中,但解决vertigal-align是使用span.material-icons和给它一个相对位置,所以我们可以使用top:3px例如。
这里是相关的代码。
<div class="navbar-fixed" id="secondary-navbar">
<nav>
<div class="nav-wrapper">
<ul>
<li>
<a href="#!">
<span class="material-icons">event</span>
<span class="nav-text">Calendario</span>
</a>
</li>
<li>
<a href="#!">
<span class="material-icons">location_on</span>
<span class="nav-text">Mapa</span>
</a>
</li>
<li>
<a href="#!">
<span class="material-icons">apps</span>
<span class="nav-text">Galería</span>
</a>
</li>
</ul>
</div>
</nav>
</div>
CSS
#secondary-navbar nav
{
background:#ffffff;
}
#secondary-navbar nav .nav-wrapper ul li a .nav-text
{
font-size:1.2em;
position:relative;
}
#secondary-navbar nav .nav-wrapper ul li a .material-icons
{
font-size:1.2em;
margin-right:0.2em;
position:relative; /* this line and the next "do the thing" */
top:3px;
}
#secondary-navbar nav .nav-wrapper ul li a
{
text-align:center; /* this center the text, obv */
height:56px;
}
#secondary-navbar nav .nav-wrapper ul li a,
#secondary-navbar nav .nav-wrapper ul li a .material-icons
{
color:#06207d;
}
#secondary-navbar nav .nav-wrapper ul li
{
width:33%;
}
#secondary-navbar nav .nav-wrapper ul li:nth-child(3)
{
width:34%;
}
我最诚挚的问候
答案 3 :(得分:0)
答案 4 :(得分:0)
当我在按钮中更改mat-icon
的大小时,其垂直对齐变得不好,然后我在vertical-align: -webkit-baseline-middle;
上添加了mat-icon
并得到了实际需要的结果。
这是我如何改善这一点...
<button color="primary" mat-raised-button>
<mat-icon>edit</mat-icon>
Edit Profile
</button>
// CSS
mat-icon {
font-size: 16px;
}
结果,我发现icon
和text
的位置未对齐
然后我添加了vertical-align: -webkit-baseline-middle;
mat-icon {
font-size: 16px;
vertical-align: middle;
}
并获得了所需的结果