zurb Foundation 5 图标栏文本未对齐答案

【问题标题】：zurb foundation 5 icon bar Text Misalignedzurb Foundation 5 图标栏文本未对齐
【发布时间】：2018-02-25 22:52:26
【问题描述】：

我有一个奇怪的问题，即图标栏下的文本没有在图标下居中。

代码示例

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

我试图将标签居中但没有运气。以前有没有人对此有任何问题。因为是新账号，所以不能发截图。但是联系人标签和帐户标签似乎从图标的左侧开始并向右移动，而不是实际图标框的开始。

【问题讨论】：

只有 Moblie 有问题 **
你应该提供一个活生生的例子。使用 JSFiddle。
你能提供一个小提琴吗？
有什么问题？ JSFiddles
问题是“cart”/“home”这两个词超出了您允许的空间。您可以修复它以删除文本并保留图标。出于这个原因，大多数网站都这样做。或者您需要创建一些媒体查询并尝试为每个 div 使用“左属性”

标签： html css zurb-foundation zurb-foundation-5

【解决方案1】：

好的，你的问题是关于 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

【讨论】：