마지막 행을 왼쪽 정렬하면서 상자 그리드를 가운데에 맞추는 방법은 무엇입니까?

상자를 가운데에 배치하되 마지막 행을 왼쪽에 정렬하는 방법

문제:

사용자 컨테이너의 상자를 중앙에 정렬하고 마지막 행은 왼쪽에 정렬하려고 합니다. 즉, 텍스트가 마지막 행의 중앙에 위치하지 않도록 하려는 것입니다.

관련 코드:

div {
  padding: 20px;
  width: 200px;
  background-color: green;
  text-align: center;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

ul li {
  width: 40px;
  height: 40px;
  background-color: wheat;
  display: inline-block;
}

예제 결과:

item1	item2	item3
item4	item5	item6
item7	item8	item9

CSS를 이용한 솔루션 그리드:

div {
  padding: 20px;
  width: 200px;
  border: 1px solid;
  overflow: hidden;
  resize: horizontal;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, 40px); /* width of elements here */
  grid-auto-rows: 40px; /* height here */
  grid-gap: 4px;
  justify-content: center; /* this will do the magic */
}

ul li {
  background-color: wheat;
}

예제 결과:

item1	item2	item3
item4	item5	item6
item7	item8	item9

설명:

• The Flexbox 대신 CSS 그리드 레이아웃이 사용됩니다. inline-block.
• justify-content: center; ul 요소의 속성은 상자를 상위 컨테이너의 중앙에 정렬합니다.
• grid-template-columns 속성은 각 상자의 너비를 정의합니다.
• grid-gap 속성은 공간을 제어합니다.
• 이 솔루션은 상자를 중앙에 자동으로 정렬하고 수동으로 조정하거나 조정할 필요 없이 다양한 길이의 행을 수용합니다. 스크립트.

위 내용은 마지막 행을 왼쪽 정렬하면서 상자 그리드를 가운데에 맞추는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!