6 thủ thuật CSS giúp sắp xếp nội dung thẳng đứng

Hôm nay mình sẽ hướng dẫn các bạn 6 thủ thuật CSS giúp bạn canh chỉnh nội dung thẳng đứng.Hy vọng sẽ giúp ích cho các bạn :) cùng theo dõi nhé !

1. Sử dụng Absolute Positioning

Thủ thuật đầu tiên là sử dụng các thuộc tính vị trí. Bạn có 2 thuộc tính, một là container, một là các phần tử con, nơi chứa nội dung.

Đầu tiên chúng ta sẽ thiết lập vị trí của các phần tử container theo giá trị tương đối, sau đó thiết lập vị trí của các phần tử con theo giá trị tuyệt đối. Điều này cho phép chúng ta tự do đặt các phần tử ngang qua container.

Để canh chỉnh thẳng đứng, bạn di chuyển vị trí các phần tử con lên đầu, bằng ½ chiều cao của container, và kéo chúng lên bằng ½ chiều rộng của các phần tử con. Dưới đây là code :

Mẹo này hoàn hảo khi chỉ có duy nhất một phần tử con, nếu không sẽ ảnh hưởng tới vị trí tuyệt đối của các phần tử khác trong cùng một container.

2. Sử dụng CSS3 Transform

CSS3 transform làm cho các container dễ dàng đưa nội dung vào trung tâm. CSS3 Transform, không giống các thuộc tính vị trí, chúng không ảnh hưởng đến vị trí của các phần tử khác trong cùng một container.

Giả sử chúng ta có cùng cấu trúc HTML tương tự như các phương pháp trước - 1 phần tử cha, 1 phần tử con - 50% đặt trên đầu và sử dụng CSS transform chuyển nội dung về 50% còn lại và bạn đã có nó.

Hãy nhớ rằng mặc dù CSS3 Transform không hoạt động trên Internet Explorer 8, nhưng bạn cũng có thể sử dụng nhiều phương pháp khác, thủ thuật trên có thể chỉ là một dự phòng.

3. Sử dụng Padding

Chúng ta cũng có thể sử dụng padding để đánh lừa về cách sắp xếp theo chiều dọc. Để làm được như vậy, chỉ cần đặt padding đầu và cuối bằng nhau, như sau :

Mẹo này rất phù hợp khi bạn không đặt các container trong một chiều rộng cố định, chỉ thiết lập chiều rộng tự động.

4. Sử dụng Line Height

Nếu bạn chỉ có một dòng nội dung duy nhất trong container, bạn có thể sắp xếp các văn bản thẳng đứng bằng cách sử dụng thuộc tính line-height. Thiết lập giá trị line-height giống như chiều cao của container và bạn sẽ  có code như sau :

Hãy nhớ rằng thủ thuật này chỉ hoạt động với một dòng văn bản. Nếu nội dung có hai hay nhiều dòng, không gian giữa mỗi dòng sẽ quy định line-height, đưa ra rất nhiều khoảng trắng.

5. Sử dụng CSS Table 

Sử dụng CSS Table là một trong những công cụ thiết kế web yêu thích của nhiều nhà phát triển web khi áp dụng canh chỉnh nội dung thẳng đứng. Nó hoạt động được trên các trình duyệt cũ như Internet Explorer 7. Phương pháp này được thực hiện bằng cách thiết lập hiển thị cho các phần tử container theo dạng bảng, trong khi đó các phần tử con được hiển thị trong table-cell, sau đó sử dụng thuộc tính vertical-align để canh giữa văn bản theo chiều dọc.

6. Sử dụng Flexbox

Phương pháp cuối cùng để canh thẳng đứng là sử dụng Flexbox. Flexbox là một module trong CSS3. Nó cung cấp một phương pháp đơn giản hơn cho việc sắp xếp nội dung. Để canh nội dung thẳng đứng trong box flex, chỉ cần thêm align-items: center, kết quả như sau :

Lưu ý rằng một số trình duyệt như Internet Explorer 10, Safari 6 à Chrome 27,.. thì Flexbox chỉ hỗ trợ tính năng nội bộ của các module Flexbox. Do đó, tương tự với thủ thuật CSS3 Transform.

Tag : thủ thuật web, thiết kế web, kiến thức seo, thủ thuật seo, lập trình, css, html, thủ thuật blogspot, thiết kế blogger