Centering In CSS: Canh giữa nội dung theo chiều ngang

Ngoài những nội dung về sắp xếp bố cục, màu sắc hay font chữ,… thì canh giữa phần tử là một trong số những nội dung khá hay và rất được quan tâm. Đó là bởi vì không phải ai mới bắt đầu làm quen với CSS cũng sẽ dễ dàng nắm bắt được. Bạn có thể sẽ ngộp thở với các phép thử mà không biết thế nào mới là chính xác. Đó cũng là lý do chủ đề này ra đời. Nhưng trước hết hãy cùng nhau nói về cách canh giữa phần tử hay canh giữa nội dung theo chiều ngang.

Canh giữa nội dung của phần tử

Phần tử không thiết lập chiều rộng

Hay nói cách khác là thuộc tính awidth lúc này chưa được khai báo. Bạn chỉ cần căn nó vào giữa là được. Vậy, đơn giản chúng ta sẽ sử dụng thuộc tính text-align với giá trị center để làm điều này. Không quá khó khi bạn mới tìm hiểu về CSS. Nó thường được dùng để canh giữa nội dung bên trong cho các heading hay paragraph,…

Tuy nhiên, nếu bạn làm điều này với các thẻ như anchor hay image, span,… chẳng hạn thì nó sẽ vô tác dụng. Bởi vì chúng ta đang bị dính đến một khái niệm: block element và inline element. Với block element, nó sẽ chiếm trọn không gian một dòng trên trang tài liệu. Các phần tử sau nó sẽ tự động ngắt dòng. Còn với inline element, nó chỉ chiếm đúng chiều rộng của nội dung bên trong nó. Do đó, để canh giữa nội dung cho các phần tử dạng này, ta sẽ phải thay đổi từ inline sang block với cú pháp display: block. Các bạn có thể xem ví dụ sau, với thẻ anchor sử dụng cú pháp trên mới có thể canh giữa.

Biết chính xác chiều rộng phần tử

Sự khác biệt nằm ở chỗ nếu chúng ta sử dụng text-align:center thì nội dung sẽ chỉ được canh giữa bên trong khối cố định đó mà thôi. Nhưng nếu chúng ta muốn là canh giữa cả khối phần tử luôn thì sao?

Lúc này, thuộc tính margin sẽ làm việc đó cho bạn. Với giá trị auto, nó sẽ tự động tính toán dựa trên chiều rộng của phần tử để canh trái và canh phải sao cho đều nhau.

Canh giữa nội dung cho nhiều phần tử

Đặt vấn đề

Từ đầu đến giờ, chúng ta chỉ canh giữa cho một phần tử thôi. Giả sử chúng ta muốn canh giữa 2 phần tử kề nhau thì làm sao? Có nhiều cách để thực hiện, vậy mấu chốt nằm ở đâu?
Hãy trở lại với ví dụ đầu tiên và ta sẽ canh giữa cho 4 phần tử h1 nằm liền kề nhau.

Các bạn thấy rằng đầu tiên ta phải cho 4 phần tử heading này nằm trên cùng một dòng. Bạn nghĩ ngay đến thuộc tính float, nhưng hãy tạm dừng lại chỗ này một chút. Thuộc tính text-align sẽ không còn hiệu lực nữa vì các phần tử đã bây giờ đã trở thành floated element. Bạn cũng sẽ nghĩ đến chuyện cho các heading của chúng ta vào trong một thẻ div. Sau đó tính toán sao cho chiều rộng của thẻ div này được cố định nhằm sử dụng thuộc tính margin với giá trị auto để nó được canh giữa. Xuất sắc đấy! Nhưng bạn sẽ gặp vấn đề khi ta có nhiều hơn 4 thẻ h1, bạn sẽ phải tính toán lại chiều rộng của div một lần nữa?

Giải quyết nó với một thủ thuật nhỏ

Thủ thuật cho trường hợp này là ta sẽ chuyển các thẻ heading về dạng inline-element để chiều rộng của nó sẽ chiếm đúng bằng chiều rộng của nội dung.

Lúc này, các thẻ heading sẽ nằm trên cùng một hàng vì nó đã là inline-element. Và như vậy, ta sẽ sử dụng được text-align: center cho phần tử chứa các heading. Với ví dụ này là ta đã sử dụng text-align cho thẻ body. Các bạn cũng có thể bỏ nó vào trong một thẻ div (đương nhiên) và làm tương tự. Đến đây, chúng ta có thể thấy rõ ràng, phần tử chứa các heading là một block element và nó hoàn toàn canh giữa được nội dung như phần đầu tiên đã giới thiệu.

Tuy nhiên, người ta sẽ thường sử dụng inline-block thay vì inline vì khả năng tùy biến hơn khi phần tử sử dụng được các thuộc tính awidth, height, margin,… Do thừa hưởng các tính chất của một block-element. Có phải đọc đến đây, các bạn sẽ cảm thấy sẽ có cái gì đó sai sai phải không?

Chúng ta vừa lạc lối?

Ngay từ đầu, chúng ta đã bị cuốn vào mớ bòng bong giữa biết rõ chiều rộng hay không. Nhưng mấu chốt của vấn đề lại là block-element và inline-element.
Các bạn có thể áp dụng lại bằng cách thực hiện ví dụ:

<h1 style=”text-align: center;”>CiOne.Vn</h1>
<h1 style=”text-align: center;”><a href=”#”>CiOne.Vn</a></h1>
<h1 style=”text-align: center;”>CiOne.Vn</h1>

Thật bất ngờ là kết quả nó hoàn toàn giống nhau. Các bạn có để ý rằng bên trong h1 (block-element) của chúng ta đều là các inline-element (CiOne.vn và CiOne.vn hay không? Đó cũng chính là lý do nó đã chịu ảnh hưởng của text-align:center và canh giữa ngay lập tức.

Tạm thời ta có thể rút ra kết luận: để sử dụng text-align:center thì các phần tử bên trong một block sẽ phải là inline. Dĩ nhiên sẽ có một số trường hợp khác “bá đạo” không phải theo trường hợp này. Các bạn có thể thử với trường hợp thay thẻ a bằng thẻ p chẳng hạn. Và chúng ta sẽ có cơ hội bàn về chủ đề này sau nếu như bạn vẫn chưa tìm ra câu trả lời.

Điểm mấu chốt nằm ở đâu

Giờ hãy thử kết hợp với hai phần đầu của tutorial này bạn sẽ hiểu ra được phần thứ ba. Đó chính là quan hệ giữa các block-element và inline-element. Đúng vậy, điều quan trọng ở đây chính là các bạn phải nắm được kiến thức của block-element và inline-element. Nó là gì? Và cách nó ảnh hưởng đến dòng chảy của tài liệu (cách gọi của tôi khi đề cập đến normal document flow).

Trên thực tế, đối với ví dụ với các thẻ heading phía trên, đó là một đòn tung hỏa mù mà thôi. Vấn đề này thường gặp nhất là khi ta tạo thanh menu cho trang web với ul li. Sau đó canh giữa cho nội dung thanh menu của mình giống như ví dụ này:

Kết luận

Chung quy lại thì các bạn chỉ cần nắm các kiến thức về block và inline. Mối quan hệ giữa chúng cộng với tutorial này là coi như đã hiểu được cách canh giữa nội dung hoặc canh giữa một phần tử theo chiều ngang rồi. Có thể phần hay hơi khó hiểu, vì đơn giản các trick ở đây bắt buộc bạn phải có kiến thức về Block – Inline thật vững vàng. Ở phần sau chúng ta sẽ nói về cách canh giữa theo chiều dọc, còn bây giờ các bạn hãy thư giãn tý đi nhé.