你好我有基金會的問題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

相關問題