Question

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

<!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 max-width小于.cell容器宽度。

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

＆＃13;

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

＆＃13;

我使用基础xy网格将我的图像集中在一个小屏幕上有些麻烦

1 个答案: