Hãy làm theo 5 kỹ thuật căn giữa khi các kỹ thuật này trải qua một loạt thử nghiệm để xem kỹ thuật nào dễ thay đổi nhất.
Việc tập trung vào CSS là một thử thách khét tiếng, đầy những trò đùa và châm biếm. 2020 CSS đã trưởng thành và giờ đây, chúng tôi có thể cười đùa một cách chân thật, chứ không phải răng chặt.
Nếu bạn thích video, đây là phiên bản YouTube của bài đăng này:
Thách thức
Có nhiều loại căn giữa. Từ các trường hợp sử dụng khác nhau, số lượng đối tượng cần căn giữa, v.v. Để giải thích lý do đằng sau kỹ thuật căn giữa "chiến thắng", tôi đã tạo ra The Resilience Ringer. Đó là một loạt các bài kiểm thử căng thẳng cho từng chiến lược tập trung để 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 tiết lộ kỹ thuật tính điểm cao nhất, cũng như "có giá trị nhất". Hy vọng bạn có thể áp dụng các kỹ thuật và giải pháp căn giữa mới.
Khơi dậy sức bền
Chuông phục hồi thể hiện niềm tin của tôi rằng một chiến lược tập trung phải thích ứng 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 thử khả năng phục hồi sau đây cho các kỹ thuật căn giữa có thể duy trì:
- Squished: căn giữa sẽ có thể xử lý các thay đổi về chiều rộng
- Squashed: căn giữa sẽ có thể xử lý các thay đổi về chiều cao
- Trùng lặp: căn giữa phải linh động đối với số lượng mục
- Chỉnh sửa: căn giữa phải động theo thời lượng và ngôn ngữ của nội dung
- Flow: căn giữa phải là hướng tài liệu và không phân biệt chế độ ghi
Giải pháp hiệu quả nhất phải thể hiện khả năng thích ứng bằng cách giữ nội dung ở chính giữa trong khi được nén, nén, sao chép, chỉnh sửa và hoán đổi sang nhiều chế độ và hướng dẫn ngôn ngữ. Trung tâm đáng tin cậy và kiên cường, một trung tâm an toàn.
Chú giải
Tôi đã cung cấp một số gợi ý màu sắc trực quan để giúp bạn giữ một số thông tin meta theo ngữ cảnh:
- Đường viền màu hồng biểu thị quyền sở hữu 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 đặt các mục vào giữa
- Mỗi thành phần con có một màu nền trắng, vì vậy, bạn có thể thấy mọi tác động của kỹ thuật căn giữa đối với kích thước hộp con (nếu có)
5 thí sinh
5 kỹ thuật căn giữa sẽ đưa 5 kỹ thuật căn giữa vào Chiếc nhẫn, chỉ 1 kỹ thuật nhận được Vương miện Khả năng chống chọi 👸.
1. Trung tâm nội dung
- Squish: tuyệt!
- Squash: tuyệt!
- Trùng lặp: tuyệt vời!
- Chỉnh sửa: thật tuyệt!
- Luồng: tuyệt vời!
Sẽ rất khó để vượt qua tính ngắn gọn của display: grid và cú pháp viết tắt place-content. Vì phương pháp này căn giữa và căn chỉnh chung cho trẻ em, nên đây là một kỹ thuật căn giữa vững chắc 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 mục bị tràn và không gian hạn chế
- Chỉnh sửa và bảo trì căn giữa đều ở 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
- Chế độ xem lưới sẽ tạo hàng theo mặc định
- Phần tử con rộng nhất (
max-content) sẽ đặt chiều rộng cho tất cả các phần còn lại. Nội dung này sẽ được thảo luận thêm trong Gentle Flex.
Phù hợp với bố cục macro chứa các đoạn văn và dòng tiêu đề, nguyên mẫu hoặc thường là những thứ cần căn giữa dễ đọc.
2. Linh hoạt nhẹ nhàng
- Squish: Tuyệt vời!
- Squash: Tuyệt vời!
- Trùng lặp: tuyệt!
- Chỉnh sửa: tuyệt vời!
- Luồng: Tuyệt vời!
Gentle Flex là chiến lược chỉ tập trung vào thực tế hơn. Nó mềm và nhẹ nhàng, vì không giống như place-content: center, không có kích thước hộp dành cho trẻ em nào thay đổi trong quá trình căn giữa. Nhẹ nhàng nhất có thể, tất cả các mục được xếp chồng, căn giữa và giãn cách.
.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ì đều ở 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
- Hầu hết các dòng mã
Phù hợp với cả bố cục macro và vi mô.
3. Bot tự động
- Squish: tuyệt vời
- Bóng quần: tuyệt vời
- Trùng lặp: không được
- Chỉnh sửa: tuyệt vời
- Luồng: tuyệt vời
Vùng chứa được đặt để linh hoạt mà không có kiểu căn chỉnh, trong khi phần tử con trực tiếp được tạo kiểu với lề tự động. Có một điều hoài niệm và tuyệt vời khi margin: auto hoạt động ở mọi khía cạnh của phần tử.
.autobot {
display: flex;
}
.autobot > * {
margin: auto;
}
- Thủ thuật thú vị
- Nhanh và bẩn
- Kết quả khó hiểu khi tràn
- Sự phụ thuộc vào sự phân phối thay vì khoảng trống nghĩa là bố cục có thể xuất hiện khi 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 kích thước hộp của phần tử con
Phù hợp với các biểu tượng căn giữa hoặc các phần tử giả.
4. Trung tâm lông thú
- Squish:không tốt
- Bóng quần: tệ
- Trùng lặp: không tốt
- Chỉnh sửa: tuyệt vời!
- Luồng: Tuyệt vời! (miễn là bạn sử dụng các thuộc tính logic)
Cho đến nay, "trung tâm lông mịn" của thí sinh là đối thủ nghe có vẻ ngon nhất của chúng tôi và là kỹ thuật căn giữa duy nhất do hoàn toàn yếu tố/trẻ em sở hữu. Bạn có thấy đường viền màu hồng bên trong solo của chúng ta!?
.fluffy-center {
padding: 10ch;
}
- Bảo vệ nội dung
- Nguyên tử
- Mọi thử nghiệm đều bí mật chứa chiến lược tập trung này
- Không gian từ là khoảng trống
- Ảo tưởng 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 rất chắc chắn về kích thước của chúng
Phù hợp với cách căn giữa tập trung vào từ hoặc cụm từ, thẻ, viên, nút, khối và nhiều thành phần khác.
5. Pop và Plop
- Squish: ok
- Bóng quần: ok
- Trùng lặp: không tốt
- Chỉnh sửa: tốt
- Luồng: tốt
Trạng thái này "bật" vì vị trí tuyệt đối làm bật phần tử ra khỏi luồng thông thường. Phần "plop" của tên bắt nguồn từ thời điểm tôi thấy hữu ích nhất: xếp chồng tên đó lên trên những nội dung khác. Đây là một kỹ thuật căn giữa lớp phủ cổ điển và tiện dụng, rất linh hoạt và linh hoạt theo kích thước nội dung. Đôi khi, bạn chỉ cần xếp giao diện người dùng lên trên các giao diện người dùng khác.
- Hữu ích
- Đáng tin cậy
- Khi cần, tài sản này luôn vô giá
- 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ó
- Chỉ có thể có 1 cho mỗi khối chứa mà không cần tốn thêm
Phù hợp với các cửa sổ phụ, thông báo ngắn, tin nhắn, hiệu ứng ngăn xếp và hiệu ứng độ 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ể có 1 kỹ thuật căn giữa, đó sẽ là...
[trống]
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 biểu định kiểu của tôi vì biểu định kiểu này hữu ích cho cả bố cục macro và vi mô. Đây là một giải pháp đáng tin cậy, toàn diện với những kết quả khớp với kỳ vọng của tôi. Ngoài ra, do tôi là người dùng chuyên dụng để định cỡ, nên tôi có xu hướng chuyển dần sang giải pháp này. Đúng, có rất nhiều điều cần nhập, nhưng lợi ích mà kiểu này cung cấp lớn hơn mã bổ sung.
MVP
Trung tâm Fluffy
.fluffy-center {
padding: 2ch;
}
Fluffy Center rất nhỏ nên rất dễ bị xem là kỹ thuật căn giữa, nhưng đây là một thành phần chính trong các chiến lược căn giữa của tôi. Nó quá phân hóa đến mức đôi khi tôi quên mất mình đang sử dụng nó.
Kết luận
Những loại yếu tố nào phá vỡ chiến lược tập trung? Những thách thức nào khác có thể được thêm vào tính năng tạo vòng phục hồi? Tôi đã cân nhắc đến việc dịch thuật và chuyển đổi chiều cao tự động cho vùng chứa... còn gì khác!?
Giờ bạn đã biết tôi làm việc đó như thế nào, bạn sẽ làm thế nào?! Hãy đa dạng hoá phương pháp tiếp cận của chúng ta và tìm hiểu tất cả các 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ụ 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.