html - zurb foundation 5图标栏文本未对齐

我有一个奇怪的问题，图标栏下方的文本未居于图标下方。

代码示例

<div class="row">
  <div class="small-12 columns">
    <div class="icon-bar five-up small">
      <a class="item" a href="/index.html">
        <i class="fi-home"></i>
        <div>
          <label>Home</label>
        </div>
      </a>
      <a class="item" a href="/cart.html">
        <i class="fi-shopping-cart"></i>
        <div>
          <label>Cart</label>
        </div>
      </a>
      <a class="item" a href="/pages/about-us">
        <i class="fi-info"></i>
        <div>
          <label>About</label>
        </div>
      </a>
      <a class="item" a href="/pages/contact-us">
        <i class="fi-mail"></i>
        <div>
          <label>Contact</label>
        </div>
      </a>
      <a class="item" a href="/account/login">
        <i class="fi-torso"></i>
        <div>
          <label>Account</label>
        </div>
      </a>
    </div>
  </div>
</div>

我试图使标签居中，但没有运气。以前有没有人对此有任何疑问。由于是新帐户，因此无法发布屏幕截图。但是联系人标签和客户标签似乎从图标的左侧开始，然后向右而不是实际图标框的开始。

最佳答案

好的，您的问题与基础中的CSS有关。此处的属性“填充”：

.icon-bar > * {
   font-size: 1rem;
   padding: 1.25rem;
}

要解决此问题，您需要为移动设备添加媒体查询。也许像这样：

@media (max-width: 400px) {
  a.item {
    padding-left: 0;
    padding-right: 0;
    position: relative;
    text-align: center;
  }
}

更改分辨率的值400px。如果由于CSS样式被另一种覆盖而无法使用..将padding-left和padding-right更改为：

padding-left: 0 !important;
padding-right: 0 !important;

选中此JSFiddle

关于html - zurb foundation 5图标栏文本未对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31479491/