0

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

密码笔

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

4

1 回答 1

0

边距：0 自动 0 自动；如果 img max-width 小于 .cell 容器宽度，则将图像在 .cell 容器内居中。

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

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

于 2017-07-27T00:24:41.683 回答