Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Cách Căn Giữa CSS Của Holy Grail

by
Difficulty:BeginnerLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Manh Nguyen (you can also view the original English article)

Chris Coyier gần đây đã xuất bản một cây lựa chọn trên site của anh ấy, CSS Tricks, để minh họa rất nhiều cách căn giữa các thứ theo chiều ngang hoặc theo chiều dọc bằng cách sử dụng CSS. Do là các giải pháp độc lập, tất cả chúng đều có các sự phản đối, nhưng được kết hợp lại chúng là một công cụ căn giữa không thể ngăn cản cái mà làm việc tốt và nhất quán trên IE8.

Đây là cách bạn thực hiện nó.

Bắt đầu từ các khối

Nếu bạn đang làm một website responsive, bạn nhiều khả năng điều chỉnh kích cỡ các element với phần trăm, vì thế hãy tạo một element .container tùy ý:

Để đảm bảo container element của chúng ta kéo dài một cách thích hợp, hãy thiết lập html, body { width: 100%; height: 100%; }.

Chuyển sang các bảng

Bây giờ, bên trong .container, chúng ta sẽ nhận được căn giữa theo chiều dọc với các kiểu bảng chung. Cái này lấy các element block bình thường và làm cho chúng hành xử giống các cell của bảng, cho phép chúng ta căn giữa theo chiều dọc:

Cuối cùng, chúng ta sẽ thêm một element được căn giữa theo chiều ngang:

Bên trong chúng, bạn có thể đặt bất cứ thứ gì trái tim bạn mong muốn, bao gồm các khối văn bản có chiều cao biến động, hoặc các element có position là absolute.

Biến đổi

Để thay đổi căn giữa theo chiều ngang của element, chỉ cần sửa thuộc tính text-align của .inner. Để thay đổi căn giữa theo chiều dọc, sửa thuộc tính vertical-align của .inner.

Kết luận

Ví dụ này có thể trông khá nhiều markup, nhưng các phần làm việc chỉ có ba thẻ div: .outer, .inner, and.centered. Và style cho chúng là nhất quán vì vậy bạn có thể sử dụng cái này trong boilerplate CSS của bạn trên các dự án và không bao giờ phải lo lắng về nó một lần nữa.

Nó là một yếu tố khác lớn hơn hầu hết các kỹ thuật căn giữa và hoàn toàn 'chống đạn'. Hi vọng của tôi là cái này sẽ trở thành cách thức căn giữa chuẩn và chúng ta cuối cùng có thể dừng lo lắng về việc căn giữa trong CSS.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.