我在使用基础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网格的小屏幕上集中我的图像时遇到了一些麻烦

回答

相关问题