У меня возникли проблемы с центрированием моих изображений на маленьком экране, используя основную сетку XY

Я создал тренировочный сайт с новой сеткой 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>

Источник

1 ответ

Решение

поле: 0 авто 0 авто; будет центрировать изображение внутри контейнера.cell, при условии, что img max-width меньше ширины контейнера.cell.

Возможно, вам придется отредактировать / изменить 0 значений для полей сверху и снизу в соответствии с вашим макетом.

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

Источник
Другие вопросы по тегам