How to center a div with css-grids?

Asked 23/7, 2017 at 14:17 Answered 3/1, 2023 at 15:44

Solved html css responsive-design css-grid

You can see my project here: https://jsfiddle.net/alphatier/byfvpq8h/2/

.i {
  grid-area: i;
}

.t {
  grid-area: t;
  margin: auto;
}

.grid {
  display: grid;
  grid-gap: 15px;
}

.box {
  display: grid;
  grid-gap: 4px;
  grid-template-areas: "i t";
  margin-bottom: 5px;
}

@media(min-width: 350px) {
  .grid {
    grid-template-columns: repeat(3, 100px);
  }
  .box {
    display: grid;
    grid-gap: 4px;
    grid-template-areas: "i" "t";
    text-align: center;
  }
  .t {
    margin: 0;
  }
}

@media(min-width: 475px) {
  .grid {
    grid-template-columns: repeat(4, 100px);
  }
}

@media(min-width: 590px) {
  .grid {
    grid-template-columns: repeat(5, 100px);
  }
}

@media(min-width: 705px) {
  .grid {
    grid-template-columns: repeat(6, 100px);
  }
}

@media(min-width: 820px) {
  .grid {
    grid-template-columns: repeat(7, 100px);
  }
}

@media(min-width: 935px) {
  .grid {
    grid-template-columns: repeat(8, 100px);
  }
}

<div class="grid">
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
</div>

It displays qr codes and it displays a text for each qr code.

If the screen size is < 350px, the layout is smartphone-optimized and I'm glad with that. But if the screen size is >= 350px, I don't know how to center it.

Let's pick a screen size between 350px and 475px, for example, 460px. Then, you can see 3 qr codes with their text in a row. But on the right side, there is a lot of space. How can I center those 3 qr codes?

The code

margin: auto

didn't work for me because the width of div.grid is maximum.

Thurgau answered 23/7, 2017 at 14:17 Comment(0)

Add justify-content: center to class .grid
https://jsfiddle.net/byfvpq8h/3/

.i {
  grid-area: i;
}

.t {
  grid-area: t;
  margin: auto;
}

.grid {
  display: grid;
  grid-gap: 15px;
  justify-content: center;
}

.box {
  display: grid;
  grid-gap: 4px;
  grid-template-areas: "i t";
  margin-bottom: 5px;
}

@media(min-width: 350px) {
  .grid {
    grid-template-columns: repeat(3, 100px);
  }
  .box {
    display: grid;
    grid-gap: 4px;
    grid-template-areas: "i" "t";
    text-align: center;
  }
  .t {
    margin: 0;
  }
}

@media(min-width: 475px) {
  .grid {
    grid-template-columns: repeat(4, 100px);
  }
}

@media(min-width: 590px) {
  .grid {
    grid-template-columns: repeat(5, 100px);
  }
}

@media(min-width: 705px) {
  .grid {
    grid-template-columns: repeat(6, 100px);
  }
}

@media(min-width: 820px) {
  .grid {
    grid-template-columns: repeat(7, 100px);
  }
}

@media(min-width: 935px) {
  .grid {
    grid-template-columns: repeat(8, 100px);
  }
}

<div class="grid">
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
</div>

Refer to this for more CSS grid tips
https://css-tricks.com/snippets/css/complete-guide-grid/

.grid {
  display: grid;
  grid-gap: 15px;
  justify-content: center;
}

EDIT 1:

This is what you were starting off with.

Using justify-content: center gives you this.

Following the suggestion by @abhishek-soni
Using justify-content: space-around gives you this.

Pick whichever is more suitable for your needs @Alpha

Confirm answered 23/7, 2017 at 14:27 Comment(0)

I find the easiest technique in centering a div is using a grid:

html:

<article class="grid-parent">
    
    <div>"I'm a div!</div>
    
</article>

.grid-parent {
    display: grid;
    place-items: center;
}

The place-items property in CSS is shorthand for the align-items and justify-items properties, combining them into a single declaration.

For further insight: https://css-tricks.com/almanac/properties/p/place-items/

Deandra answered 9/11, 2021 at 2:3 Comment(2)

Does this actually work? Running the snippet doesn't really show what's happening here. – Stablish 9/11, 2021 at 2:7

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Arquebus 9/11, 2021 at 2:7

Done! The property justify-content tells the grid how to align the items in the case of extra space. It has multiple valid values, like start(left), end(right) and center(center). The one you want is center.

This property is applied on the grid element

Here's the pen. Link to pen

Also, here's some docs. Link to docs

But, in my opinion, doing justify-content: space-around; looks nicer for your case. Up to you of course, just stating my opinion.

Roley answered 23/7, 2017 at 14:29 Comment(0)

Using the
place-items: center;
That will combine 2 properties of the parent container as one.
And use The justify-content:center; and align-items center as well.

Handout answered 3/1, 2023 at 15:44 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags