Material design 图标，如何将它们居中为文本？

Question

我一直在尝试使用 MaterializeCSS 制作某种带有 3 个链接的导航栏，每个链接的宽度为导航栏的 33%，并且我想将文本置于链接内（甚至是图标）的中心

如果我不放置左类或右类，文本和图标不会保持在同一行...但是如果我将左类放在图标上，那么它会浮动到左侧，因此考虑到导航栏是width: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/

您知道如何解决这个问题吗？

Answer 1

我一般用这个：

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

Answer 2

使用

text-align: center;

用于在父级的中心对齐文本和图标。

Answer 3

当我更改按钮中

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

并得到了所需的结果

Answer 4

在尝试了很多事情之后我找到了解决方案。谢谢大家，给了我很多帮助。

我希望这个解决方案对另一个人有帮助，你们都是对的：将图标作为文本居中的方法是 text-align:center，但是解决垂直对齐问题是使用 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%;
}

我最诚挚的问候

Answer 5

简单使用

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

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