如何将 div 与 css 网格居中？
How to center a div with css-grids?
你可以在这里看到我的项目：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>
它显示二维码并为每个二维码显示一个文本。
如果屏幕尺寸 < 350px，布局针对智能手机进行了优化，对此我很满意。但是如果屏幕尺寸>=350px，我不知道如何居中
让我们选择 350px 和 475px 之间的屏幕尺寸，例如 460px。然后，您可以看到 3 个二维码及其文本排成一行。但是在右侧，有很多space。如何将这 3 个二维码居中？
密码
margin: auto
对我不起作用，因为 div.grid 的宽度最大。
将 justify-content: center 添加到 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>
更多CSS网格提示请参考此
https://css-tricks.com/snippets/css/complete-guide-grid/
.grid {
display: grid;
grid-gap: 15px;
justify-content: center;
}
编辑 1:
这就是您的起点。
使用 justify-content: center 给你这个。
按照@abhishek-soni 的建议
使用 justify-content: space-around 给你这个。
选择最适合您的需求@Alpha
完成！
属性 justify-content 告诉网格在额外 space 的情况下如何对齐项目。它有多个有效值，如 start（左）、end（右）和 center（中）。你要的那个是center.
此属性应用于网格元素
这是笔。
Link to pen
此外，这里还有一些文档。 Link to docs
但是，在我看来，justify-content: space-around; 看起来更适合您的情况。当然取决于你，只是陈述我的意见。
我发现使 div 居中的最简单方法是使用网格：
html:
<article class="grid-parent">
<div>"I'm a div!</div>
</article>
.grid-parent {
display: grid;
place-items: center;
}
CSS 中的 place-items 属性 是 shorthand 用于 align-items 和 justify-items 属性，将它们组合成一个声明。
进一步了解：https://css-tricks.com/almanac/properties/p/place-items/
你可以在这里看到我的项目：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>
它显示二维码并为每个二维码显示一个文本。
如果屏幕尺寸 < 350px，布局针对智能手机进行了优化，对此我很满意。但是如果屏幕尺寸>=350px，我不知道如何居中
让我们选择 350px 和 475px 之间的屏幕尺寸，例如 460px。然后，您可以看到 3 个二维码及其文本排成一行。但是在右侧，有很多space。如何将这 3 个二维码居中？
密码
margin: auto
对我不起作用，因为 div.grid 的宽度最大。
将 justify-content: center 添加到 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>
更多CSS网格提示请参考此
https://css-tricks.com/snippets/css/complete-guide-grid/
.grid {
display: grid;
grid-gap: 15px;
justify-content: center;
}
编辑 1:
这就是您的起点。
使用 justify-content: center 给你这个。
按照@abhishek-soni 的建议
使用 justify-content: space-around 给你这个。
选择最适合您的需求@Alpha
完成！
属性 justify-content 告诉网格在额外 space 的情况下如何对齐项目。它有多个有效值，如 start（左）、end（右）和 center（中）。你要的那个是center.
此属性应用于网格元素
这是笔。 Link to pen
此外，这里还有一些文档。 Link to docs
但是，在我看来，justify-content: space-around; 看起来更适合您的情况。当然取决于你，只是陈述我的意见。
我发现使 div 居中的最简单方法是使用网格：
html:
<article class="grid-parent">
<div>"I'm a div!</div>
</article>
.grid-parent {
display: grid;
place-items: center;
}
CSS 中的 place-items 属性 是 shorthand 用于 align-items 和 justify-items 属性，将它们组合成一个声明。
进一步了解：https://css-tricks.com/almanac/properties/p/place-items/