Question

我有一个奇怪的问题，图标栏下的文字没有位于图标下方。

代码示例

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

我试图让标签居中，没有运气。有没有人之前有任何问题。无法发布屏幕截图，因为它是一个新帐户。但是联系人标签和帐户标签似乎从图标的左侧开始，然后向右移动而不是实际图标框的开头。

Answer 1

好的，你的问题是关于CSS的基础。财产＆＃34;填充＆＃34;这里：

.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

zurb foundation 5 icon bar文本未对齐

1 个答案: