Lớp học lập trình: Căn giữa trong CSS

Adam Argyle

Lớp học lập trình này sẽ giúp bạn chia sẻ và giới thiệu cách căn giữa mà bạn yêu thích trong CSS.

Hãy xem bài đăng trên blog của tôi Đặt giữa trong CSS để tìm hiểu 5 trong số các cách tôi yêu thích để căn giữa trong CSS. Hoặc xem video này!

Thiết lập

  1. Nhấp vào Remix to Edit (Trộn lại để chỉnh sửa) để có thể chỉnh sửa dự án.
  2. Mở app/index.html
  3. Tại line 23, hãy thay thế /* your centering CSS here /* bằng CSS của bạn
  4. (không bắt buộc) Đặt tên cho kỹ thuật căn giữa và thay thế văn bản trong <h1>

Kiểu

  1. Tạo tệp mới trong thư mục app/css/
  2. Tạo một bộ chọn để giữ giải pháp căn giữa, chẳng hạn như .turbo-center hoặc [floaty-mcfloat]
  3. Trong bộ chọn mới đó, hãy viết kỹ thuật căn giữa của bạn (vui lòng xem kỹ thuật của các bộ chọn khác trong app/css/ làm ví dụ)
  4. (không bắt buộc) viết một số "kiểu hỗ trợ" để chúng ta có thể xem phần tử con nào cần kiểu để hỗ trợ việc căn giữa
  5. Mở app/css/index.css và nhập tệp mới ở dưới cùng

Kết hợp tất cả

  1. Mở lại app/index.html
  2. Tìm <article> và cung cấp bộ chọn tuỳ chỉnh mà bạn đã tạo ở bước 2 của phần trước.
  3. Hãy twitt cho tôi về Glitch của bạn và tôi sẽ giới thiệu Glitch đó trong bài đăng trên blog!