Html 基础6调整大小和定心问题 您好，基础6有问题。在我的页脚上有一个社交列表，上面有4个图标（电话、电子邮件、推特、facebook），我无法让它们集中在调整大小上。在我的电脑上，它看起来不错，但是，上传到网络上，并在我的手机上查看（nexus 6）的图标偏离中心的左侧。这是我的页脚代码 <footer> <!--social icons should be centered --> <div class="row"> <div class="large-3 medium-centered columns"> <ul class="menu social"> <li> <a href="http://www.twitter.com"> <i class="fi-social-twitter"></i> </a> </li> <li> <a href="http://www.facebook.com"> <i class="fi-social-facebook"></i> </a> </li> <li> <a href="tel:12345678901 ;=""> <i class="fi-telephone"></i></a> </li> <li> <a href="mailto:info@example.com"> <i class="fi-mail"></i> </a> </li> </ul> </div> </div> <p class="text-center copyright"> All Rights Reserved Final FInal 2016.</p> </footer> 版权所有2016年决赛

该网站是www.gastromob.com。我真的需要一些关于如何改进这个网站的建议。我有几个问题，但我想先解决这个问题，谢谢。

您使用的类

居中

用于将一行中的列居中；它不会使该列中的文本居中

Foundation 6建议在

周围使用

包装器。如果使用Flexbox，则不需要包装器，可以将

.align center

类添加到

ul

元素。请点击查看更多信息

这里似乎不需要使用

行

和

列

包装器

您可以通过这种方式编写代码以实现所需：

<footer>
  <div class="menu-centered">
    <ul class="menu">
      <li>
        <a href="http://www.twitter.com">
          <i class="fi-social-twitter"></i>
        </a>
      </li>
      <li>
        <a href="http://www.facebook.com">
          <i class="fi-social-facebook"></i>
        </a>
      </li>
      <li>
        <a href="tel:12345678901">
          <i class="fi-telephone"></i>
        </a>
      </li>
      <li>
        <a href="mailto:info@example.com">
          <i class="fi-mail"></i>
        </a>
      </li>
    </ul>
  </div>
  <p class="text-center copyright"> All Rights Reserved Final FInal 2016.</p>
</footer>

版权所有2016年决赛

顺便说一下，

href=“tel:12345678901；=”

不正确，应该改为

href=“tel:1234567890”

我还查看了您的站点，注意到您为元素设置了固定高度

。因此，在小型设备上查看站点时，此覆盖会溢出并覆盖其下方的元素。您只需删除固定高度即可解决此问题

缩小屏幕尺寸时，船的标志也会阻挡视线。你可能还想让它更灵敏

---

除此之外，所有其他元素都响应良好，看起来不错！

您使用的类

中居中的

旨在将一行中的列居中；它不会将该列中的文本居中

Foundation 6建议在

周围使用

包装器。如果您使用的是Flexbox，则不需要包装器，可以将
.align center
类添加到
ul
元素。请单击以获取更多信息

这里似乎不需要使用
行
和
列
包装器

您可以通过这种方式编写代码以实现所需：

<footer>
  <div class="menu-centered">
    <ul class="menu">
      <li>
        <a href="http://www.twitter.com">
          <i class="fi-social-twitter"></i>
        </a>
      </li>
      <li>
        <a href="http://www.facebook.com">
          <i class="fi-social-facebook"></i>
        </a>
      </li>
      <li>
        <a href="tel:12345678901">
          <i class="fi-telephone"></i>
        </a>
      </li>
      <li>
        <a href="mailto:info@example.com">
          <i class="fi-mail"></i>
        </a>
      </li>
    </ul>
  </div>
  <p class="text-center copyright"> All Rights Reserved Final FInal 2016.</p>
</footer>












版权所有2016年决赛

顺便说一下，
href=“电话：12345678901=“
不正确，应改为
href=“tel:1234567890”

我还查看了您的站点，注意到您为元素
设置了固定高度。因此，当在小型设备上查看站点时，该覆盖会溢出并覆盖其下方的元素。您只需删除固定高度即可解决此问题

缩小屏幕尺寸时，boat徽标也会遮挡视线。您可能还希望使其具有响应性

除此之外，所有其他元素都反应灵敏，看起来不错
 使用引导。。。。我在使用基金会，在Bootstrap中重做这个网站并不是一个解决方案。不要听Bootstrap粉丝。基础是可怕的可怕和少肿胀。不管怎样，你用的是什么版本？我以前从未见过“以媒体为中心”的课程，ul是否有必要？我猜（因为我看不到整个布局），但这只是一个课堂问题。哦，还有，你的实际布局并没有反映你在这里发布的内容。老实说，看起来你刚刚劫持了某人的模板，但不太确定你现在在做什么，对不起，朋友。使用引导。。。。我在使用基金会，在Bootstrap中重做这个网站并不是一个解决方案。不要听Bootstrap粉丝。基础是可怕的可怕和少肿胀。不管怎样，你用的是什么版本？我以前从未见过“以媒体为中心”的课程，ul是否有必要？我猜（因为我看不到整个布局），但这只是一个课堂问题。哦，还有，你的实际布局并没有反映你在这里发布的内容。老实说，看起来你刚刚劫持了某人的模板，但不太确定你现在在做什么，对不起，朋友。谢谢你的回复，我解决了这个问题。仍然卡在收割台上。我无法使元素正确居中。有没有关于如何使这项工作的建议？我希望徽标和标题与标题和按钮一起居中。。在手机上，我只想显示标题和按钮，居中显示。现在在电脑和手机上，标题都偏离了中心。我一直在尝试不同的专栏，导航栏的想法，但到目前为止，没有什么是我想要的工作方式。请帮忙！！网站是www.gastrombo.com我想问题是你似乎真的很喜欢使用
position:relative
。为了更好地理解CSS定位，您可能需要在上观看视频。我使用此代码对齐标题：
客户端
。您还需要将
text align:center
添加到
.logo
类中。并从标题中使用的所有类中删除
position:relative
。不需要。谢谢你的代表