如何在链接文本下对齐材料图标？答案

【问题标题】：How to align material icon under link text?如何在链接文本下对齐材料图标？
【发布时间】：2016-03-24 20:46:55
【问题描述】：

如何对齐链接文本下方材料图标的向下箭头？我尝试使用 :after 伪类，但它不起作用。

HTML：

<div class="jump-to-links">
    <ul class="list-unstyled">
      <li>
        <a href="#">Link<i class="material-icons">&#xE313;</i></a>
      </li>
      <li>
        <a href="#">Link<i class="material-icons">&#xE313;</i></a>
      </li>
      <li>
        <a href="#">Link<i class="material-icons">&#xE313;</i></a>
      </li>
      <li>
        <a href="#">Link<i class="material-icons">&#xE313;</i></li></a>
    </ul>
  </div>

SCSS：

.jump-to-links {
  .material-icons {
    @include centerX();
    bottom: -20px;
    color: $purple;
    padding: 10px 0px 10px 0px;
  }
  text-align: center;
  a,a:hover {
    text-decoration: none;
    color: $black;
    font-weight: bold;
    display: inline-block;
  }
  ul li {
    display: inline-block;
    margin-right: 12%;
  }
  li {
    cursor: pointer;
    text-align: center;
    position: relative;
  }
}

JSFIDDLE https://jsfiddle.net/kpvwwveL/6/

【问题讨论】：

以“链接”为中心，包含材料图标：jsfiddle.net/t27je5Lq
以下任何答案对您有用吗？
@Pangloss - 我发现了另一种解决问题的方法。
很高兴听到，只是为了检查，因为问题仍然存在。您可以接受同样有效的那个，或者根据需要发布您自己的答案。

标签： html css materialize

【解决方案1】：

将 display:block 添加到您的

i{
  display:block;
}

https://jsfiddle.net/kpvwwveL/3/

【讨论】：

【解决方案2】：

我发现这是解决对齐问题的最佳方法：

<div class="jump-to-links">
    <ul class="list-unstyled">
      <li>
        <a href="#">Link<i class="material-icons">&#xE313;</i></a>
      </li>
      <li>
        <a href="#">Link<i class="material-icons">&#xE313;</i></a>
      </li>
      <li>
        <a href="#">Link<i class="material-icons">&#xE313;</i></a>
      </li>
      <li>
        <a href="#">Link<i class="material-icons">&#xE313;</i></li></a>
    </ul>
  </div>


.jump-to-links {
  .material-icons {
    @include centerX();
    bottom: -20px;
    color: $purple;
    padding: 10px 0px 10px 0px;
  }
  text-align: center;
  a,a:hover {
    text-decoration: none;
    color: $black;
    font-weight: bold;
    display: inline-block;
  }
  ul li {
    display: inline-block;
    margin-right: 12%;
  }
  li {
    cursor: pointer;
    text-align: center;
    position: relative;
  }
}

【讨论】：

【解决方案3】：

为什么要把事情复杂化而不是顺其自然？我认为是在链接文本和 i 之间放置换行符。

  <a href="#">
    Link
    <br>
    <i class="material-icons arrow-down">keyboard_arrow_down</i>
  </a>

https://jsfiddle.net/weejoy22/

【讨论】：