我在使用基礎xy網格的小屏幕上集中我的圖像時遇到了一些麻煩

我用新的Foundation xy網格製作了練習網站，當我將瀏覽器縮小到小屏幕時，圖像擁抱左側的頁面，並不再居中。直到我將屏幕設置爲最小尺寸，然後圖像居中。我不明白我做錯了什麼，我有對齊中心類應用於父。我在使用基礎xy網格的小屏幕上集中我的圖像時遇到了一些麻煩

Codepen

<!doctype html> 


    <html class="no-js" lang="en" dir="ltr"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Foundation for Sites</title> 
    <link rel="stylesheet" href="css/foundation.css"> 
    <link rel="stylesheet" href="css/app.css"> 
    </head> 
    <body> 
    <header class='header grid-x align-center align-middle'> 
     <div class='cell shrink'> 
      <h1>Our Site</h1> 
     </div> 
    </header> 
    <div class='grid-container'> 
     <div class='main-content grid-x grid-padding-x align-center'> 
      <div class='cell shrink'> 
       <h3 class='pad'>What We Are</h3> 
      </div> 
     </div> 
     </div> 
     <div class='grid-container'> 
     <div class='grid-x grid-padding-x align-center'> 
      <div class='cell medium-4'> 
       <img src="http://skirogaining.tojnar.cz/gpx/gpx-web.svg" alt=''> 
       <p> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
       </p> 
      </div> 
      <div class='cell medium-4'> 
      <img src="http://skirogaining.tojnar.cz/gpx/gpx-web.svg" alt=''> 
       <p> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
       </p> 
      </div> 
      <div class='cell medium-4'> 
       <img src="http://skirogaining.tojnar.cz/gpx/gpx-web.svg" alt=''> 
       <p> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
       </p> 
      </div> 
     </div> 
     </div> 
    <script src="js/vendor/jquery.js"></script> 
    <script src="js/vendor/what-input.js"></script> 
    <script src="js/vendor/foundation.js"></script> 
    <script src="js/app.js"></script> 
    </body>

來源

2017-07-25 ShortCircuit616

保證金：0 0汽車汽車;如果img max-width小於.cell容器寬度，則將使圖像在.cell容器內居中。

您可能需要編輯/更改頂部和底部邊距的0值以適合您的佈局。

.cell { 
 
    text-align: center; 
 
    margin: 0 auto 0 auto; 
 
}

來源

2017-07-27 00:24:41 ITZAP

我從來沒有想到的是，漂亮的工作。我使用文本對齊中心，這將是好的，它集中我的形象？自從它出來以來，我一直在使用xy-grid，但我正在考慮使用bootstrap。 – ShortCircuit616

是的。正如所解釋的，您需要保證金。我個人更喜歡基金會，而不是Bootstrap，特別是現在新功能。但你的選擇。 – ITZAP

你是對的ITZAP，我只是嘗試bootstrap ... yuck。 – ShortCircuit616

我在使用基礎xy網格的小屏幕上集中我的圖像時遇到了一些麻煩

回答

相關問題