我在使用基础 xy 网格将图像集中在小屏幕上时遇到了一些问题答案

【问题标题】：I'm having some trouble centering my images on a small screen using foundation xy grid我在使用基础 xy 网格将图像集中在小屏幕上时遇到了一些问题
【发布时间】：2017-12-30 17:58:44
【问题描述】：

我使用新的 Foundation xy 网格创建了一个练习站点，当我将浏览器缩小到一个小屏幕时，图像会紧贴页面的左侧，并且不再居中。直到我将屏幕设置为最小尺寸，然后图像才正确居中。我不明白我做错了什么，我将 align-center 类应用于父级。

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>

【问题讨论】：

标签： flexbox zurb-foundation zurb-foundation-6 xy-grid

【解决方案1】：

margin: 0 auto 0 auto; 将图像在 .cell 容器内居中，前提是 img max-width 小于 .cell 容器宽度。

您可能需要编辑/更改顶部和底部边距的 0 值以适合您的布局。

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

【讨论】：

我从没想过，干得好。我使用了文本对齐中心，可以吗，它使我的图像居中？自从 xy-grid 出现以来，我一直在使用它，但我正在考虑使用 bootstrap。
是的。正如解释的那样，您需要保证金。我个人更喜欢 Foundation，而不是 Bootstrap，尤其是现在有了新功能。但你的选择。