Đăng nhập

Những kỹ thuật code CSS sắp xếp nội dung thẳng đứng

  • 28/02/2015 - 7:57 AM
  • 2409 Views

Bài viết trước đã chia sẽ đến các bạn về những công cụ tối ưu hóa CSS tốt nhất. Bài viết này tiếp tục chia sẽ về những kỹ thuật code CSS sắp xếp nội dung thẳng đứng một cách dễ dàng trong lĩnh vực thiết kế web.

huong-dan-cach-coding-ho-tro-seo-tot-nhat

Những kỹ thuật code CSS sắp xếp nội dung thẳng đứng

Sử dụng Absolute Positioning

Đầ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.

Mã HTML:

<div class="container">I'm aligned vertically!</div>

Mã CSS:

* { padding: 10px 20px; }
.container {
     position: relative;
     height: 6em;
     width: 300px;
     background: #e5e6e5;
     margin-left: auto;
     margin-right: auto;
}
.content {
     position: absolute;
     color: #fff;
     top: 3em;
     line-height: 3em;
     margin-top: -1.5em;
     background: #7396a1;
}

Kỹ thuật code CSS 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.

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ó.

Mã HTML:

<div class="container">
     <div class="content">I'm aligned vertically!</div>
</div>

Mã CSS:

.container{
     height: 100px;
     background: #7396a1;
     color: #fff;
     width: 300px;
     margin-left: auto;
     margin-right: auto;
}
.content {
     text-align: center;
     position: relative;
     top: 50%;
     -webkit-transform: translateY(-50%);
     -o-transform: translateY(-50%);
     transform: translateY(-50%);
}

Lưu ý: CSS3 Transform không hoạt động như 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.

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:

Mã HTML:

<div class="container">
     <p>I'm aligned vertically!</p>
</div>

Mã CSS:

.container{
     background-color: #7396a1;
     color: #fff;
     width: 300px;
     margin-left: auto;
     margin-right: auto;
}
.content {
     padding: 10% 50px;
}

Kỹ thuật code CSS 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.

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ẽ thấy kết quả như sau:

Mã HTML:

<div class="container">I'm aligned vertically!</div>

Mã CSS:

.container {
     line-height: 100px;
     background-color: #7396a1;
     padding: 0 30px;
     width: 300px;
     margin-left: auto;
     margin-right: auto;
     color: #fff;
}

Kỹ thuật code CSS này chỉ hoạt động với một dòng văn bản. Nếu nội dung vi phạm 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.

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 trong 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.

Mã HTML:

<div class="container">
     <div class="content">I'm aligned vertically!</div>
</div>

Mã CSS:

.container {
     display: table;
     background: #7396a1;
     height: 100px;
     color: #fff;
     margin-left: auto;
     margin-right: auto;
}
.content {
     display: table-cell;
     vertical-align: middle;
     padding: 0 30px;
}

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;

Mã HTML:

<div class="container">
     <p>I'm aligned vertically!</p>
</div>

Mã CSS:

.container{
     display: flex;
     align-items: center;
     height: 10em;
     background: #7396a1;
     width: 300px;
     color: #fff;
     margin-left: auto;
     margin-right: auto;
}

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