Hãy theo dõi 5 kỹ thuật căn giữa khi chúng trải qua một loạt thử nghiệm để xem kỹ thuật nào có khả năng thích ứng tốt nhất với thay đổi.
Căn giữa trong CSS là một thách thức nổi tiếng, đầy rẫy những trò đùa và chế giễu. 2020 CSS đã phát triển toàn diện và giờ đây, chúng ta có thể cười trước những trò đùa đó một cách chân thành, chứ không phải cười gượng.
Nếu bạn thích xem video, thì đây là phiên bản YouTube của bài đăng này:
Thách thức
Có nhiều kiểu căn giữa. Từ các trường hợp sử dụng khác nhau, số lượng phần tử cần căn giữa, v.v. Để minh hoạ lý do đằng sau kỹ thuật căn giữa "chiến thắng", tôi đã tạo ra The Resilience Ringer. Đây là một loạt các bài kiểm tra áp lực cho từng chiến lược căn giữa để cân bằng bên trong và để bạn quan sát hiệu suất của chúng. Cuối cùng, tôi sẽ tiết lộ kỹ thuật đạt điểm cao nhất cũng như kỹ thuật "có giá trị nhất". Hy vọng bạn sẽ học được các kỹ thuật và giải pháp mới để căn giữa.
Người kiên cường
Resilience Ringer là một minh chứng cho niềm tin của tôi rằng chiến lược căn giữa phải thích ứng được với bố cục quốc tế, khung nhìn có kích thước thay đổi, nội dung chỉnh sửa văn bản và nội dung động. Những nguyên lý này giúp định hình các bài kiểm tra khả năng thích ứng sau đây để các kỹ thuật căn giữa có thể chịu được:
- Bị nén: việc căn giữa phải có thể xử lý các thay đổi về chiều rộng
- Squashed: centering should be able to handle changes to height
- Trùng lặp: việc căn giữa phải linh động theo số lượng mục
- Chỉnh sửa: việc căn giữa phải linh động theo độ dài và ngôn ngữ của nội dung
- Flow: centering should be document direction and writing mode agnostic
Giải pháp chiến thắng phải thể hiện được khả năng thích ứng bằng cách giữ nội dung ở giữa trong khi bị bóp, nén, sao chép, chỉnh sửa và hoán đổi sang nhiều chế độ và hướng ngôn ngữ. Trung tâm đáng tin cậy và linh hoạt, một trung tâm an toàn.
Legend
Tôi đã cung cấp một số gợi ý màu sắc trực quan để giúp bạn lưu giữ một số thông tin meta trong bối cảnh:
- Đường viền màu hồng cho biết quyền sở hữu các kiểu căn giữa
- Hộp màu xám là nền trên vùng chứa tìm cách có các mục ở giữa
- Mỗi phần tử con có màu nền trắng để bạn có thể thấy mọi hiệu ứng mà kỹ thuật căn giữa tác động lên kích thước hộp con (nếu có)
5 thí sinh
5 kỹ thuật lấy lại cân bằng bước vào Đấu trường kiên cường, nhưng chỉ có một kỹ thuật nhận được Vương miện kiên cường 👸.
1. Trung tâm nội dung
- Squish: tuyệt vời!
- Bóng quần: tuyệt vời!
- Sao chép: tuyệt vời!
- Chỉnh sửa: tuyệt vời!
- Flow: tuyệt vời!
Sẽ rất khó để vượt qua được sự ngắn gọn của display: grid và cách viết tắt place-content. Vì thuộc tính này căn giữa và căn đều các phần tử con, nên đây là một kỹ thuật căn giữa hiệu quả cho các nhóm phần tử cần đọc.
.content-center {
display: grid;
place-content: center;
gap: 1ch;
}
- Nội dung được căn giữa ngay cả trong không gian bị ràng buộc và tràn
- Tập trung chỉnh sửa và bảo trì ở cùng một nơi
- Khoảng trống đảm bảo khoảng cách bằng nhau giữa n phần tử con
- Theo mặc định, lưới sẽ tạo các hàng
- Thành phần con rộng nhất (
max-content) sẽ đặt chiều rộng cho tất cả các thành phần còn lại. Chúng ta sẽ thảo luận thêm về vấn đề này trong phần Gentle Flex.
Phù hợp với bố cục vĩ mô chứa đoạn văn và tiêu đề, nguyên mẫu hoặc nhìn chung là những nội dung cần căn giữa dễ đọc.
2. Uốn dẻo nhẹ nhàng
- Squish: Tuyệt vời!
- Bí: tuyệt vời!
- Trùng lặp: Tuyệt vời!
- Chỉnh sửa: Tuyệt vời!
- Flow: Tuyệt vời!
Gentle Flex là một chiến lược tập trung duy nhất vào việc căn giữa. Hiệu ứng này mềm mại và nhẹ nhàng vì không giống như place-content: center, không có kích thước hộp nào của thành phần con thay đổi trong quá trình căn giữa. Tất cả các mục được xếp chồng, căn giữa và giãn cách một cách nhẹ nhàng nhất có thể.
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
- Chỉ xử lý việc căn chỉnh, hướng và phân phối
- Chỉnh sửa và bảo trì ở cùng một nơi
- Khoảng trống đảm bảo khoảng cách bằng nhau giữa n phần tử con
- Nhiều dòng mã nhất
Phù hợp với cả bố cục vĩ mô và vi mô.
3. Autobot
- Squish: tuyệt vời
- Bóng quần: tuyệt vời
- Sao chép: tốt
- Chỉnh sửa: tuyệt vời
- Flow: tuyệt vời
Vùng chứa được đặt thành flex mà không có kiểu căn chỉnh, trong khi các phần tử con trực tiếp được tạo kiểu bằng lề tự động. Có điều gì đó hoài niệm và tuyệt vời về
margin: auto khi làm việc trên mọi khía cạnh của phần tử.
.autobot {
display: flex;
}
.autobot > * {
margin: auto;
}
- Mẹo thú vị
- Nhanh chóng và đơn giản
- Kết quả không như mong đợi khi tràn
- Việc dựa vào phân phối thay vì khoảng cách có nghĩa là bố cục có thể xảy ra khi các thành phần con chạm vào các cạnh
- Việc "đẩy" vào vị trí có vẻ không tối ưu và có thể dẫn đến thay đổi về kích thước hộp của thành phần con
Rất phù hợp để căn giữa các biểu tượng hoặc phần tử giả.
4. Fluffy Center
- Bóp méo: không tốt
- Bóng quần: kém
- Trùng lặp: không tốt
- Chỉnh sửa: Tuyệt vời!
- Flow: Tuyệt vời! (miễn là bạn sử dụng các thuộc tính logic)
Thí sinh "fluffy center" cho đến nay là ứng cử viên có vẻ ngon nhất và là kỹ thuật căn giữa duy nhất hoàn toàn thuộc sở hữu của phần tử/phần tử con. Thấy viền hồng bên trong của chúng tôi không!?
.fluffy-center {
padding: 10ch;
}
- Bảo vệ nội dung
- Nguyên tử
- Mọi bài kiểm tra đều ngầm chứa chiến lược tập trung này
- Khoảng cách giữa các từ là khoảng trống
- Ảo tưởng về việc không hữu ích
- Có sự xung đột giữa vùng chứa và các mục, vì mỗi mục đều có kích thước rất cố định
Phù hợp nhất cho việc căn giữa từ hoặc cụm từ, thẻ, khối, nút, khối thông tin và nhiều thành phần khác.
5. Pop & Plop
- Squish: được rồi
- Bóng quần: được
- Trùng lặp: không tốt
- Chỉnh sửa: ổn
- Lưu lượng: ổn
Điều này "bật lên" vì vị trí tuyệt đối sẽ bật phần tử ra khỏi luồng thông thường. Phần "plop" trong tên bắt nguồn từ thời điểm tôi thấy nó hữu ích nhất: đặt nó lên trên những thứ khác. Đây là một kỹ thuật căn giữa lớp phủ cổ điển và tiện dụng, linh hoạt và linh động theo kích thước nội dung. Đôi khi, bạn chỉ cần đặt giao diện người dùng lên trên một giao diện người dùng khác.
- Hữu ích
- Đáng tin cậy
- Khi bạn cần, tính năng này sẽ vô cùng hữu ích
- Mã có giá trị phần trăm âm
- Yêu cầu
position: relativeđể buộc một khối chứa - Ngắt dòng sớm và không hợp lý
- Chỉ có thể có 1 phần tử cho mỗi khối chứa mà không cần nỗ lực thêm
Phù hợp với cửa sổ phụ, thông báo nhanh và thông báo, hiệu ứng xếp chồng và chiều sâu, cửa sổ bật lên.
Người chiến thắng
Nếu tôi ở trên một hòn đảo và chỉ có thể sử dụng một kỹ thuật căn giữa, thì đó sẽ là…
[tiếng trống dồn]
Gentle Flex 🎉
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
Bạn luôn có thể tìm thấy thuộc tính này trong biểu định kiểu của tôi vì nó hữu ích cho cả bố cục vĩ mô và vi mô. Đây là một giải pháp đáng tin cậy về mọi mặt và mang lại kết quả đúng như tôi mong đợi. Ngoài ra, vì tôi là một người thích định cỡ nội tại, nên tôi có xu hướng chuyển sang giải pháp này. Đúng vậy, bạn phải nhập rất nhiều, nhưng lợi ích mà nó mang lại lớn hơn nhiều so với đoạn mã bổ sung.
MVP
Fluffy Center
.fluffy-center {
padding: 2ch;
}
Fluffy Center là một kỹ thuật căn giữa rất nhỏ nên dễ bị bỏ qua, nhưng đây là một kỹ thuật căn giữa chủ yếu trong các chiến lược căn giữa của tôi. Nó nhỏ gọn đến mức đôi khi tôi quên mất là mình đang dùng nó.
Kết luận
Những yếu tố nào phá vỡ chiến lược căn giữa của bạn? Còn thử thách nào khác có thể thêm vào chuông kiên cường không? Tôi đã cân nhắc việc dịch và chuyển đổi chiều cao tự động trên vùng chứa… còn gì nữa không!?
Giờ thì bạn đã biết cách tôi làm, vậy bạn sẽ làm thế nào?! Hãy đa dạng hoá các phương pháp tiếp cận và tìm hiểu mọi cách để xây dựng trên web. Hãy làm theo lớp học lập trình trong bài đăng này để tạo ví dụ về căn giữa của riêng bạn, giống như các ví dụ trong bài đăng này. Hãy tweet cho tôi phiên bản của bạn và tôi sẽ thêm phiên bản đó vào phần Bản phối lại của cộng đồng bên dưới.
Bản phối lại của cộng đồng
- CSS Tricks với một bài đăng trên blog