CSS에서 센터링

5가지 센터링 기술을 따라 일련의 테스트를 거치면서 어떤 것이 변경에 가장 탄력적인지 확인하십시오.

Dec 16, 2020

Available in: English, Русский, and 日本語

Adam Argyle

TwitterGitHubGlitchHomepage

CSS에서 센터링은 농담과 조롱으로 가득 찬 악명 높은 도전입니다. 2020 CSS는 모두 성장했으며 이제 이를 악물면서가 아니라 그 농담에 정직하게 웃을 수 있습니다.

비디오를 선호하는 경우 이 게시물의 YouTube 버전이 있습니다.

당면 과제 #

다양한 사용 사례에서부터 센터링 수 등 센터링에는 다양한 유형이 있습니다. "승리" 센터링 기술의 근거를 설명하기 위해 Resilience Ringer를 만들었습니다. 각 센터링 전략에 대한 일련의 스트레스 테스트로 내부 균형을 유지하고 성능을 관찰할 수 있습니다. 마지막으로 '가장 가치 있는' 기술은 물론 최고 득점 기술까지 공개합니다. 새로운 센터링 기술과 솔루션을 알아보십시오.

Resilience Ringer #

Resilience Ringer는 센터링 전략이 국제 레이아웃, 다양한 크기의 뷰포트, 텍스트 편집 및 동적 콘텐츠에 탄력적이어야 한다는 신념을 나타냅니다. 이러한 원칙은 센터링 기술이 견딜 수 있도록 다음과 같은 탄력성 테스트를 형성하는 데 도움이 되었습니다.

1. 스퀴시: 센터링은 너비의 변경 사항을 처리할 수 있어야 합니다.
2. 스퀴시: 센터링은 너비의 변경 사항을 처리할 수 있어야 합니다.
3. 복제: 가운데 맞춤은 항목 수에 따라 동적이어야 합니다.
4. 편집: 센터링은 콘텐츠의 길이와 언어에 따라 동적이어야 합니다.
5. 흐름: 센터링은 문서 방향 및 쓰기 모드에 구애받지 않아야 합니다.

승리 솔루션은 뭉개지고, 찌그러지고, 복제되고, 편집되고, 다양한 언어 모드와 방향으로 바뀌면서 콘텐츠를 중앙에 유지하여 탄력성을 보여야 합니다. 믿을 수 있고 탄력적이며 안전한 센터.

범례 #

컨텍스트에서 일부 메타 정보를 유지하는 데 도움이 되는 몇 가지 시각적 색상 힌트를 제공했습니다.

• 분홍색 테두리는 센터링 스타일의 소유권을 나타냅니다.
• 회색 상자는 항목을 중앙에 배치하려는 컨테이너의 배경입니다.
• 각 하위 항목의 배경색은 흰색이므로 센터링 기술이 하위 상자 크기에 미치는 영향을 확인할 수 있습니다(있는 경우).

5명의 참가자 #

5가지 센터링 테크닉이 Resilience Ringer에 들어가고, 오직 하나만 Resilience Crown 👸을 받게 됩니다.

1. 콘텐츠 센터 #

1. 스퀴시 : 굉장해!
2. 스쿼시 : 좋아!
3. 중복 : 훌륭합니다!
4. 편집 : 훌륭합니다!
5. 흐름 : 좋아!

display: grid와 place-content 약칭의 간결함을 이기기는 어려울 것입니다. 하위 항목을 집합적으로 중앙에 정렬하고 양쪽 맞춤하므로 읽을 요소 그룹에 대한 견고한 중앙 정렬 기술입니다.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}

.fluffy-center {
  padding: 10ch;
}

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

.fluffy-center {
  padding: 2ch;
}