你好我有基金会的问题6.在我的页脚有一个社会名单4个图标（电话，电子邮件，Twitter的，脸谱）我不能让他们留在集中调整大小。在我的电脑上，看起来很好，但是，上传到网络上并在我的手机上查看（nexus 6）图标偏离了中心位置。这里是我的页脚代码基金会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:[email protected]"> 
         <i class="fi-mail"></i> 
        </a> 
       </li>  
      </ul> 
     </div> 
    </div>   
    <p class="text-center copyright"> All Rights Reserved Final FInal 2016.</p> 
</footer>

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

来源

2016-06-21 adam g

使用Bootstrap .... http://getbootstrap.com – AmanKumar

我正在使用基础，在bootstrap中重做网站不是解决方案。 –

不要听Bootstrap的粉丝。基金会很惊人，而且不那么臃肿。无论如何，你使用的是什么版本？我以前从来没有见过“以媒介为中心”，甚至有必要？我猜测（因为我看不到整个布局），但这只是一个课堂问题。哦，PS，你的实际布局并不能反映你在这里发布的内容。老实说，它看起来像你刚刚插入某人的模板，但不知道你现在在做什么，对不起阿米戈。 –

您使用的类medium-centered旨在将一个列居中在一行内;它不会将该文本居中在该列内。

Foundation 6建议使用围绕<ul class="menu">的<div class="menu-centered">包装。如果您使用的是Flexbox，则不需要包装，可以将.align-center类添加到ul元素。请点击here了解更多信息。

使用row和column包装在这里似乎没有必要。

你可以写你的代码这种方式来实现你所需要的：

<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:[email protected]"> 
      <i class="fi-mail"></i> 
     </a> 
     </li> 
    </ul> 
    </div> 
    <p class="text-center copyright"> All Rights Reserved Final FInal 2016.</p> 
</footer>

顺便说一句，href="tel:12345678901 ;=""是不正确的，应该是href="tel:1234567890"代替。

我也看了看你的网站，并注意到你为元素<div id="overlay">设置了一个固定的高度。因此，在小设备上查看网站时，此覆盖层会溢出并覆盖其下面的元素。你应该简单地删除固定的高度来解决这个问题。

当缩小屏幕尺寸时，船标也会阻挡视图。您可能也想让它响应。

除此之外，所有其他元素都很敏感，看起来不错！

来源

2016-06-23 17:07:40 Vadim

感谢您的回复，我解决了这个问题。仍然停留在标题上。我无法让元素正确居中。有关如何完成这项工作的任何建议？我希望徽标和标题与标题和按钮一起居中。在移动设备上，我只需要标题和按钮以中心显示。现在在电脑和手机上的标题都是偏离中心的。我不断尝试不同的列，导航栏的想法，但迄今为止，没有任何工作是我想要的。请帮忙！！网站是www.gastromob.com –

我认为问题是，你似乎真的很喜欢'position：relative'。您可能想要观看http://cssreset.com/understanding-css-relative-and-absolute-positioning-explained/上的视频，以更好地理解CSS定位。我用这个代码来对齐头部：'

The Client

'。您还需要将'text-align：center'添加到'.theLogo'类。并从标题中使用的所有类中移除'position：relative'。他们没有必要。 – Vadim

基金会6调整大小和集中问题

回答

The Client

相关问题