I made a practice site with the new Foundation xy grid, and when I scale the browser down to a small screen, the images hug the left side of the page, and are not longer centered. It's not until I make the screen the smallest size it can be, and then the images are centered properly. I don't understand what I'm doing wrong, I have the align-center class applied to the parent.
<!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>
margin: 0 auto 0 auto; will center the image inside the .cell container, provided img max-width is less than .cell container width.
You may need to edit/change 0 values for Top and Bottom margins to suit your layout.
.cell {
text-align: center;
margin: 0 auto 0 auto;
}