일련의 테스트를 거치면서 5가지 센터링 기법을 따라 가장 복원력이 우수한 방법을 찾아보세요.
CSS를 중앙에 배치하는 것은 농담과 조롱으로 가득한 악명 높은 도전과제입니다. 2020년 이제 CSS는 모두 성인이 된 상태이므로 이제 우리는 그 농담을 치아를 꽉 움켜쥐고 있을 때입니다.
동영상을 선호한다면 이 게시물의 YouTube 버전을 참고하세요.
도전과제
센터링에는 여러 유형이 있습니다 사용 사례의 차이에 따라 '성공'한 것으로 간주하는 근거를 보여주기 위해 중앙 집중화 테크닉을 사용하여 Resilience Ringer를 만들었습니다 중앙 집중화에 대한 일련의 스트레스 테스트입니다 균형을 맞추고 실적을 관찰해야 합니다. 마지막에는 최고 점수 기법과 '가장 가치 있는' 기법이 표시됩니다. 새로운 센터링 기법과 솔루션을 소개해 드렸길 바랍니다.
회복탄력의 종소리
회복 탄력성 종목은 중앙 집중화가 국제적 레이아웃, 다양한 크기의 표시 영역, 텍스트 수정 및 동적 콘텐츠에 대한 복원력을 갖추어야 합니다. 있습니다. 이러한 원칙은 IT 지원 전문가에 대한 다음과 같은 복원력 테스트를 견딜 수 있는 센터링 기법:
- Squished: 중앙 배치는 화면 중앙에 배치한
- 찌그러짐: 중앙에 배치하여 높이 변경을 처리할 수 있어야 합니다.
- 중복: 가운데 정렬은 항목 수에 따라 동적으로 조정되어야 함
- 수정: 가운데 정렬은 콘텐츠의 길이와 언어에 동적이어야 합니다.
- 흐름: 가운데 정렬은 문서 방향이어야 하며 쓰기 모드에 구애받지 않아야 함
성공적인 솔루션이라면 콘텐츠에 콘텐츠를 그대로 유지하여 복원력을 입증해야 합니다. 찌그러뜨리고, 찌그러뜨리고, 복제하고, 수정하고, 교체하는 동안 다양한 언어 모드와 방향에 도움을 받을 수 있습니다 신뢰할 수 있고 회복력이 뛰어난 센터, 안전한 센터.
범례
메타 정보를 유지하는 데 도움이 되도록 시각적 색상 힌트를 제공하였습니다. 문맥:
- 분홍색 테두리는 가운데 맞춤 스타일의 소유권을 나타냅니다.
- 회색 상자는 중앙에 배치하려는 컨테이너의 배경입니다. 항목
- 각 어린이의 배경색이 흰색이므로 어떤 효과를 볼 수 있고 센터링 기법에 하위 상자 크기가 있습니다 (있는 경우).
5명의 참가자
5개의 센터링 기법이 Resilience Ringer에 들어가면, 하나만 수신됩니다. 회복의 왕관 ROWS.
1. 콘텐츠 센터
<ph type="x-smartling-placeholder">- Squish: 좋습니다.
- 스쿼시: 좋습니다.
- 중복: 좋습니다.
- 수정: 좋습니다.
- 흐름: 좋습니다.
display: grid의 간결성과
place-content 약식입니다. 종합적으로 아동을 중심에 두고 정당화하기 때문에
읽어야 할 요소 그룹에 대한 확실한 중심 기법입니다.
.content-center {
display: grid;
place-content: center;
gap: 1ch;
}
- 공간이 제한되어 있고 넘치더라도 콘텐츠가 중앙에 배치됨
- 중앙 정렬 수정 및 유지보수가 모두 한곳에서 가능합니다.
- 간격은 n개의 하위 요소 사이에 동일한 간격을 보장합니다.
- 그리드가 기본적으로 행을 생성함
- 가장 넓은 하위 요소 (
max-content)가 나머지 모든 요소의 너비를 설정합니다. 이 작업은 Gentle Flex에서 자세히 설명합니다.
적합한 매크로 레이아웃: 문단 및 헤드라인, 프로토타입 또는 일반적으로 잘 읽을 수 있는 중앙 배치가 필요한 항목입니다.
2. 부드러운 플렉스
- Squish: 좋아요.
- 스쿼시: 좋습니다.
- 중복: 좋습니다.
- 수정: 좋습니다.
- 흐름: 좋습니다.
Gentle Flex는 진정한 센터전용 전략입니다. 이 곡은 부드럽고 부드럽고
place-content: center와 달리
중앙 집중화입니다. 가능한 한 부드럽게 모든 항목은 쌓이고 중앙에 배치됩니다.
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
- 정렬, 방향, 분포만 처리
- 한곳에서 수정 및 유지관리하기
- 간격은 n개의 하위 요소 사이에 동일한 간격을 보장합니다.
- 대부분의 코드 줄
매크로 및 마이크로 레이아웃 모두에 적합합니다.
3. 오토봇
- Squish: 우수
- 스쿼시: 우수
- 중복: 괜찮음
- 수정: 우수
- 흐름: 우수
컨테이너는 정렬 스타일 없이 유연하도록 설정되지만, 직계 하위 요소는
자동 여백으로 스타일이 지정됩니다. 옛날 옛적에
요소의 모든 면에서 작동하는 margin: auto
.autobot {
display: flex;
}
.autobot > * {
margin: auto;
}
- 재미있는 속임수
- 퀵 앤 더티
- 오버플로 발생 시 불편한 결과
- 간격 대신 배포에 의존하면 하위 요소에서 레이아웃이 발생할 수 있음 접촉면
- '푸시됨' 최적의 상태로 보이지 않으며 이로 인해 아이들의 상자 크기에 따라
아이콘이나 유사 요소를 중앙에 배치하는 데 좋습니다.
4. 푹신한 센터
- Squish: 나쁨
- 스쿼시: 나쁨
- 중복: 나쁨
- 수정: 좋습니다.
- 흐름: 좋습니다. (논리 속성을 사용하는 한)
참가자 '플러피 센터' 1980년대 중반의 가장 맛있는 경쟁자이며 전적으로 요소/하위 요소가 소유하는 중앙 배치 기법입니다. 솔로 이너 핑크 보기 테두리!?
.fluffy-center {
padding: 10ch;
}
- 콘텐츠 보호
- 핵무기
- 모든 테스트에는 이 중앙 집중 전략이 비밀리에 포함되어 있습니다
- 단어 공간에 간격이 있음
- 쓸모가 없다는 착각
- 컨테이너와 항목 간에 충돌이 발생합니다. 각각이 컨테이너 안에 있기 때문입니다. 크기에 대해 확고하게 정해야 합니다.
단어 또는 구문 중심의 가운데 맞춤, 태그, 알약, 버튼, 칩, 자세히 알아보세요.
5. 팝 및 퐁당
- Squish: 알겠습니다
- 스쿼시: 알겠습니다.
- 중복: 나쁨
- 수정: 괜찮습니다.
- 흐름: 괜찮음
이렇게 하면 절대 위치는 요소가 정상에서 튀어나오게 하고 있습니다. '플롭' 일부 이름은 가장 유용하다고 생각할 때 가져온 것입니다. 다른 것들 위에 놓을 수 있습니다. 이것은 고전적이고 편리한 오버레이 중앙 배치입니다. 유연하고 동적인 기법입니다. 때로는 다른 UI 위에 UI를 배치합니다.
- 유용함
- 안정성
- 필요할 때 언제든 얻을 수 있는
- 음수 백분율 값이 있는 코드
position: relative가 포함 블록을 강제 적용해야 합니다.- 조기에 어색한 줄바꿈
- 추가 작업 없이 포함 블록당 하나만 있을 수 있습니다.
모달, 토스트 메시지 및 메시지, 스택 및 깊이 효과, 팝오버에 적합합니다.
수상 기업
제가 섬에 있을 때 센터링 테크닉을 하나만 사용할 수 있다면...
[드럼 소리]
Gentle Flex 🎉
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
매크로 및 자바스크립트 스타일에 모두 유용하므로 사용할 수 있습니다. 내 일상에 맞는 결과를 제공하는 있습니다. 또한 저는 타고난 사이즈 애호가이기 때문에 이 솔루션에 통합했습니다. 맞습니다, 입력하기가 쉽지만 좋은 점은 크기가 추가 코드보다 큽니다.
MVP
플러피 센터
.fluffy-center {
padding: 2ch;
}
플러피 센터는 매우 미미해서 중앙 집중 기술로 간과하기 쉽습니다. 하지만 그것은 제 중앙 배치 전략의 핵심입니다. 매우 원자적이어서 가끔 잊어버려요.
결론
어떤 유형의 요소가 센터 배치 전략을 위반하나요? 또 어떤 어려움이 있을까요? 복원력 벨소리 장치에 추가할 수 있을까요? 번역을 고려했고 컨테이너의 자동 높이 전환...
이제 내가 어떻게 했는지 알았으니 어떻게 하면 어떨까?! 접근방식을 다각화하기 웹에서 빌드하는 모든 방법을 배웁니다. 이 게시물의 Codelab을 따라 이 게시물에서처럼 가운데에 배치된 예를 직접 만들어 보겠습니다. 트윗 새 버전을 만들어 배포하고 커뮤니티 리믹스 섹션을 참조하세요.
커뮤니티 리믹스
- 블로그 게시물이 있는 CSS 유용한 정보