材料设计图标，如何将它们居中作为文本？

Question

我一直在尝试使用MaterializeCSS制作一个带有3个链接的导航栏，每个链接的宽度为导航栏的33％，并且我想将链接内的文本居中（甚至是图标）。如果我不添加左侧或右侧类，则文本和图标不会处于同一行...但是，如果我将左侧类添加到图标，则它会向左浮动，因此由于导航栏的宽度为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，我尝试将图标设置为 inline-block，但导航栏的高度超过了 56px... 你有任何解决办法吗？ https://jsfiddle.net/4aednm5d/

- cnexans

---

你的演示中的图标在哪里（除了使用icon_class_name作为<i>的文本之外）？ - Roko C. Buljan

是的，我按照文档使用了<i class="material-icons">...</i>。 - cnexans

Answer 1

我通常使用这个:

.icon-align {
       vertical-align: text-bottom;
    }
<i class="material-icons md-18 icon align">check_circle</i>Auto Accepted</div>`

- dessertcook

---

我猜测icon和align之间缺少一个破折号，应该是icon-align。 - undefined

Answer 2

使用

text-align: center;

用于将文本和图标居中对齐到父元素中心。

- Florin Pop

---

我是这样做的（它是jsfiddle中的第一个<li>），但是<li>占用了59像素，文本和图标没有垂直对齐... - cnexans

Answer 3

当我改变按钮中mat-icon的大小时，它的垂直对齐出现了问题，然后我在mat-icon上添加了vertical-align: -webkit-baseline-middle;，得到了实际所需的结果。

以下是我改进这个问题的方法...

<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;
}

并且获得了所需的结果

- WasiF

Answer 4

尝试了很多方法后，我找到了解决方案。谢谢大家，你们帮了我很多。

我希望这个解决方案对其他人也有帮助：你们都是正确的，将图标居中作为文本的方法是text-align:center，但要解决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%;
}

我的最好的问候

- cnexans

Answer 5

只需简单地使用

.material-icons{
  line-height:59px;
}

这个工作正常 https://jsfiddle.net/morfeibox/txs411yk/3/

- Atanas Beychev