代码之家  ›  专栏  ›  技术社区  ›  hardfork

如何使用css网格将div居中?

css-grid responsive-design css html
  •  5
  • hardfork  · 技术社区  · 7 年前

    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 350p x、 我不知道 如何将其居中。

    让我们选择一个屏幕大小介于 和 475px , 。然后,您可以看到3个二维码及其文本排成一行。但在右边,有很大的空间。我如何将这3个二维码居中?

    代码 

    margin: auto

    对我不起作用,因为 div.grid 是最大值。

    3 回复  |  直到 7 年前
        1
  •  9
  •   Vadim Ovchinnikov    7 年前

    添加 justify-content: center 到课堂 .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>


    https://css-tricks.com/snippets/css/complete-guide-grid/ 

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

    :

    这就是你刚开始做的。 original code

    对齐内容:居中 justify content center

    按照@abhishek soni的建议
    使用 justify-content: space-around enter image description here

    选择哪个更适合您的需求@Alpha

        2
  •  2
  •   Pranav Nutalapati    7 年前

    完成! justify-content start (左), end center (中间)。你想要的是 .

    该属性应用于网格元素

    这是钢笔。 Link to pen

    还有,这里有一些文档。 Link to docs

    justify-content: space-around; 看起来更适合你的案子。当然由你决定,我只是说说我的意见。

        3
  •  1
  •   maxshuty Fatih Hayrioğlu    2 年前

    我发现使div居中的最简单方法是使用网格:

    html: 

    <article class="grid-parent">
    
    <div>"I'm a div!</div>
    
</article>
    .grid-parent {
    display: grid;
    place-items: center;
}

    CSS中的place items属性是align items和justify items属性的缩写,将它们组合成一个声明。

    进一步了解: https://css-tricks.com/almanac/properties/p/place-items/

    推荐文章
    vito  ·  为什么在启用触摸模式时忽略媒体查询?
    3 年前
    mike3996  ·  我可以在前一个元素旁边浮动一个元素吗?
    6 年前
    Aaron  ·  HTML CSS增加背景图像的大小,使其随文本增长
    6 年前
    Vítek Peterka  ·  在一个网站上使用href=“#关于我们”进行导航在较小的设备上不起作用
    6 年前
    Ravi21  ·  FF和IE中的元素变形
    6 年前
    user7907740  ·  如何使填充响应
    7 年前
    Nathan Perigreth  ·  如何用javascript或css粗略确定设备的物理大小?
    7 年前
    user7127000  ·  每个响应输入的程序都有一个带有无限循环的主线程,这准确吗?
    7 年前
    LED Fantom  ·  .在Bootstrap网站上未找到img responsive
    7 年前
    Khepf  ·  将Reactstrap carousel图像配置为响应的最佳方法
    7 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号