Căn giữa: bố cục CSS

Khi bạn tạo một trang, bạn thường cần phải căn giữa vào trung tâm bằng một phương pháp CSS: ví dụ, căn giữa đơn vị chính. Có một số cách để giải quyết vấn đề này, mỗi cái sớm hay muộn đều phải được sử dụng bởi bất kỳ nhà thiết kế bố cục nào.

Căn chỉnh văn bản đến trung tâm

Thông thường, với mục đích trang trí, bạn cần phải đặt liên kết văn bản vào trung tâm, CSS trong trường hợp này cho phép bạn giảm thời gian bố trí. Trước đây, điều này đã được thực hiện bằng cách sử dụng thuộc tính HTML, nhưng bây giờ tiêu chuẩn đòi hỏi bạn phải căn chỉnh văn bản với sự trợ giúp của các tờ kiểu dáng. Không giống các khối, mà bạn cần thay đổi các lề bên ngoài, trong CSS, văn bản được căn giữa vào trung tâm bằng một dòng:

• Text-align: trung tâm;

Thuộc tính này được thừa kế và truyền từ cha mẹ sang tất cả các con cháu. Không chỉ ảnh hưởng đến văn bản mà còn cả các yếu tố khác. Để thực hiện việc này, chúng phải là chữ thường (ví dụ, khoảng) hoặc dòng-block (bất kỳ khối nào được hiển thị display: block property). Tùy chọn thứ hai cũng cho phép bạn thay đổi chiều rộng và chiều rộng của phần tử, nó linh hoạt hơn để điều chỉnh việc thụt lề.

Thường trên các trang được căn cứ vào thẻ chính nó. Điều này ngay lập tức làm cho mã không hợp lệ, vì W3C đã nhận ra thuộc tính align là lỗi thời. Không nên sử dụng nó trên trang.

Căn chỉnh khối cho trung tâm

Nếu bạn muốn đặt liên kết của div vào trung tâm, CSS có thể cung cấp một cách khá thuận tiện: sử dụng biên lề bên ngoài. Indents có thể được gán cho cả hai khối yếu tố và hàng-by-block những người thân. Giá trị của thuộc tính phải lấy giá trị 0 (thụt lề theo chiều dọc) và tự động (tự động chèn theo chiều ngang):

• Margin: 0 tự động;

Bây giờ tùy chọn này được công nhận là hoàn toàn hợp lệ. Việc sử dụng các lề bên ngoài cũng cho phép bạn căn chỉnh hình ảnh ở giữa: Lề CSS-property cho phép giải quyết nhiều vấn đề liên quan đến việc định vị một phần tử trên trang.

Căn chỉnh khối sang cạnh bên trái hoặc bên phải

Đôi khi bạn không cần căn giữa vào trung tâm bằng phương pháp CSS, nhưng bạn cần phải đặt hai khối cạnh nhau: một từ cạnh bên trái, cạnh kia từ bên phải. Đối với điều này, có một thuộc tính nổi, có thể lấy một trong ba giá trị: trái, phải hoặc không. Giả sử bạn có hai khối cần được đặt cạnh nhau. Sau đó, mã sẽ là:

• .left {float: left;}
• Đúng (float: phải)

Nếu có một khối thứ ba, được đặt dưới hai khối đầu tiên (ví dụ như chân trang), thì cần đặt thuộc tính rõ ràng:

• .left {float: left;}
• Đúng (float: phải)
• Footer {rõ ràng: cả hai}

Vấn đề là khối với các lớp học trái và phải thả ra khỏi dòng chảy chung, đó là tất cả các yếu tố khác bỏ qua sự tồn tại của các yếu tố liên kết. Thuộc tính rõ ràng: cả hai đều cho phép chân trang hoặc bất kỳ khối nào khác nhìn thấy các phần tử bị bỏ rơi khỏi luồng và ngăn không cho nổi từ cả bên trái và bên phải. Do đó, trong ví dụ của chúng tôi, chân sẽ di chuyển xuống.

Căn chỉnh thẳng đứng

Đôi khi không đủ để thiết lập sự căn chỉnh giữa các phương pháp CSS, bạn vẫn cần phải thay đổi vị trí thẳng đứng của khối con. Bất kỳ phần tử dòng hoặc đường nào cũng có thể được ép vào cạnh trên cùng hoặc dưới cùng, ở giữa phần tử gốc hoặc ở một vị trí tùy ý. Thông thường, bạn cần phải căn giữa khối vào giữa, sử dụng thuộc tính vertical-align. Giả sử có hai khối, một khối được lồng vào nhau. Trong trường hợp này, khối bên trong là một phần tử khối hàng (display: inline-block). Bạn phải canh lề khối con theo chiều dọc:

• Căn chỉnh trên đường viền trên - .child {vertical-align: top};
• Căn giữa (align): .child (vertical-align: middle);
• Căn lề trên đường viền dưới - .child {vertical-align: bottom};

Chặn các phần tử không liên quan đến văn bản cũng như chức năng căn chỉnh theo chiều dọc.

Có thể có vấn đề với các khối thẳng

Đôi khi căn giữa div với trung tâm bằng một phương pháp CSS có thể gây ra những vấn đề nhỏ. Ví dụ: nếu bạn sử dụng float: ví dụ: có ba khối: .first, .second, và thứ ba. Khối thứ hai và thứ ba nằm ở phần đầu tiên. Một phần tử với lớp thứ hai là trái-hợp lý, và khối cuối cùng là trái thẳng. Sau khi cân bằng, cả hai đều rớt ra khỏi dòng suối. Nếu phần tử cha không có chiều cao (ví dụ: 30em), nó sẽ không còn kéo dài dọc theo chiều cao của khối con. Để tránh lỗi này, sử dụng một "spacer" - một khối đặc biệt mà nhìn thấy thứ hai và thứ ba. Mã CSS:

• Giây {float: left}
• Thứ ba {float: phải}
• .clearfix {height: 0; Xoá: cả hai;}

Thường được sử dụng là lớp giả: sau, cũng cho phép bạn trả lại các khối vào trang web bằng cách tạo ra một phân phối giả (trong ví dụ trong div, lớp chứa chứa bên trong .first và chứa .left và .right):

• .left {float: left}
• Đúng (float: phải)
• .container: sau khi {content: ''; Hiển thị: bảng; Xoá: cả hai;}

Các lựa chọn trên là phổ biến nhất, mặc dù có một số biến thể. Bạn luôn có thể tìm thấy cách đơn giản và tiện lợi nhất để tạo ra sự tán xạ giả bằng cách thử nghiệm.

Một vấn đề thường gặp phải bởi các nhà thiết kế bố trí là sự liên kết của các yếu tố ngăn chặn dòng. Sau khi mỗi người trong số họ một khoảng trống được tự động thêm. Thuộc tính lợi nhuận, được xác định bởi một thụt lề âm, sẽ giúp giải quyết vấn đề này. Có nhiều phương pháp khác được sử dụng ít thường xuyên hơn: ví dụ: đặt lại kích thước phông chữ. Trong trường hợp này, font-size: 0 được đặt trong các thuộc tính của phần tử cha. Nếu có văn bản bên trong các khối, thì kích thước phông chữ yêu cầu sẽ được trả lại trong các thuộc tính của các phần tử chặn đường. Ví dụ: kích thước phông chữ: 1em. Phương pháp này không phải lúc nào cũng thuận tiện, vì vậy phiên bản với các chỉ dẫn bên ngoài thường được sử dụng nhiều hơn.

Căn lề khối cho phép bạn tạo các trang đẹp và các chức năng: đây là bố cục của cách bố trí tổng thể và vị trí của hàng hoá trong các cửa hàng trực tuyến và ảnh trên trang web của thẻ kinh doanh.