我在使用 foundation xy grid 将图像置于小屏幕中心时遇到了一些问题

Question

我用新的 Foundation xy 网格制作了一个练习网站，当我将浏览器缩小到小屏幕时，图像紧靠页面左侧，不再居中。直到我将屏幕缩小到最小尺寸，然后图像才正确居中。我不明白我做错了什么，我将对齐中心 class 应用于父级。

<!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>

Answer 1

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

您可能需要 edit/change 顶部和底部边距的 0 值以适合您的布局。

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

我在使用 foundation xy grid 将图像置于小屏幕中心时遇到了一些问题

I'm having some trouble centering my images on a small screen using foundation xy grid

flexbox

zurb-foundation

zurb-foundation-6

xy-grid