Căn chỉnh trung tâm CSS của nội dung khối. Căn chỉnh DIV vào giữa

Vlad Merzhevich

Do nội dung của các ô trong bảng có thể được căn chỉnh đồng thời theo chiều ngang và chiều dọc, nên khả năng kiểm soát vị trí của các phần tử so với nhau được mở rộng. Bảng cho phép bạn chỉ định căn chỉnh hình ảnh, văn bản, trường biểu mẫu và các thành phần khác có liên quan với nhau và toàn bộ trang web. Nhìn chung, việc căn chỉnh chủ yếu là cần thiết để thiết lập các kết nối trực quan giữa các yếu tố khác nhau cũng như để nhóm chúng lại với nhau.

Định tâm dọc

Một cách để cho khách truy cập thấy trọng tâm và tên của trang web là sử dụng trang giật gân. Đây là trang đầu tiên, theo quy định, có màn hình giật gân flash hoặc hình ảnh thể hiện ý chính của trang web. Hình ảnh cũng là một liên kết đến các phần khác của trang web. Bạn cần đặt hình ảnh này vào giữa cửa sổ trình duyệt, bất kể độ phân giải màn hình. Với mục đích này, bạn có thể sử dụng bảng có chiều rộng và chiều cao 100% (ví dụ 1).

Ví dụ 1: Căn giữa bản vẽ

BẢNG căn chỉnh ( chiều rộng: 100%; /* Chiều rộng bảng */ chiều cao: 100%; /* Chiều cao bảng */ )

TRONG trong ví dụ này căn chỉnh theo chiều ngang được đặt bằng tham số thẻ Align="center" và nội dung của ô có thể không được căn giữa theo chiều dọc vì đây là vị trí mặc định.

Để đặt chiều cao của bảng thành 100%, bạn cần xóa , mã sẽ không còn hiệu lực.

Việc sử dụng chiều rộng và chiều cao để bao phủ toàn bộ khu vực có sẵn của trang web đảm bảo rằng nội dung của bảng sẽ được căn chỉnh chính xác ở giữa cửa sổ trình duyệt, bất kể kích thước của nó.

Căn chỉnh theo chiều ngang

Bằng cách kết hợp các thuộc tính căn chỉnh (căn chỉnh ngang) và valign (căn chỉnh dọc) của thẻ , cho phép đặt một số loại vị trí của các phần tử so với nhau. Trong bộ lễ phục. Hình 1 cho thấy các cách căn chỉnh các phần tử theo chiều ngang.

Chúng ta hãy xem một số ví dụ về căn chỉnh văn bản theo hình bên dưới.

Căn chỉnh trên cùng

Để chỉ định căn chỉnh trên cùng của nội dung ô cho một thẻ bạn cần đặt thuộc tính valign với giá trị top (ví dụ 2).

Ví dụ 2: Sử dụng valign

Căn chỉnh

Cột 1

Cột 2

Trong ví dụ này, các đặc điểm của ô được kiểm soát bằng các tham số thẻ , nhưng cũng thuận tiện hơn khi thay đổi qua các kiểu. Đặc biệt, việc căn chỉnh trong ô được xác định bởi thuộc tính Vertical-align và text-align (ví dụ 3).

Ví dụ 3: Áp dụng kiểu để căn chỉnh

BẢNG căn chỉnh ( chiều rộng: 100%; /* Chiều rộng bảng */ ) #col1 ( chiều rộng: 75%; /* Chiều rộng cột đầu tiên */ nền: #f0f0f0; /* Màu nền của cột đầu tiên */ ) #col2 ( chiều rộng: 25 %; /* Chiều rộng của cột thứ hai */ nền: #fc5; /* Màu nền của cột thứ hai */ text-align: right; /* Căn phải */ ) #col1, #col2 ( Vertical-align: top ; / * Căn lề trên */ đệm: 5px; /* Lề xung quanh nội dung ô */ )

Cột 1

Cột 2

Để rút ngắn mã, ví dụ này sử dụng nhóm các bộ chọn vì thuộc tính căn dọc và đệm được áp dụng cho hai ô cùng một lúc.

Căn chỉnh dưới cùng được thực hiện theo cách tương tự, nhưng thay vì giá trị trên cùng, đáy được sử dụng.

Căn giữa

Theo mặc định, nội dung ô được căn chỉnh về giữa đường thẳng đứng của chúng, vì vậy nếu các cột có độ cao khác nhau, bạn cần đặt căn chỉnh về cạnh trên. Đôi khi bạn vẫn cần phải để lại phương pháp căn chỉnh ban đầu, chẳng hạn như khi đặt công thức, như trong Hình. 2.

TRONG Trường hợp như vậy công thức nằm ngay chính giữa cửa sổ trình duyệt và số của nó nằm ở cạnh phải. Để sắp xếp các phần tử theo cách này, bạn sẽ cần một bảng có ba ô. Các tế bào ngoài cùng phải có cùng kích cỡ, ở ô giữa căn lề được căn giữa, ở ô bên phải căn lề về cạnh phải (ví dụ 4). Số lượng ô này là cần thiết để đảm bảo rằng công thức được đặt ở giữa.

Ví dụ 4: Căn chỉnh công thức

Căn chỉnh

(18.6)

Trong ví dụ này, ô đầu tiên của bảng được để trống; nó chỉ dùng để tạo thụt lề, nhân tiện, cũng có thể được đặt bằng cách sử dụng kiểu.

Căn chỉnh các phần tử biểu mẫu

Sử dụng bảng sẽ thuận tiện cho việc xác định vị trí của các trường biểu mẫu, đặc biệt khi chúng xen kẽ với văn bản. Một trong những tùy chọn thiết kế cho biểu mẫu dùng để nhập nhận xét được hiển thị trong Hình. 3.

Để đảm bảo rằng văn bản bên cạnh các trường biểu mẫu được căn phải và bản thân các thành phần của biểu mẫu được căn trái, bạn sẽ cần một bảng có đường viền vô hình và hai cột. Cột bên trái sẽ chứa chính văn bản đó và cột bên phải sẽ chứa các trường văn bản (ví dụ 5).

Ví dụ 5: Căn chỉnh các trường biểu mẫu

Căn chỉnh

Tên
E-mail
Một lời bình luận

Trong ví dụ này, đối với những ô cần căn phải, thuộc tínhalign="right" sẽ được thêm vào. Để đảm bảo rằng nhãn Nhận xét được đặt ở đầu văn bản nhiều dòng, ô tương ứng được đặt thành căn chỉnh trên cùng bằng thuộc tính valign.

Mọi nhà thiết kế bố cục đều thường xuyên phải đối mặt với nhu cầu căn chỉnh nội dung theo một khối: theo chiều ngang hoặc chiều dọc. Có một số bài viết hay về chủ đề này, nhưng tất cả chúng đều cung cấp nhiều lựa chọn thú vị nhưng ít thực tế, đó là lý do tại sao bạn phải dành thêm thời gian để nêu bật những điểm chính. Tôi quyết định trình bày thông tin này dưới một hình thức thuận tiện cho tôi để không phải tra google nữa.

Căn chỉnh các khối với kích thước đã biết

Cách dễ nhất để sử dụng CSS là căn chỉnh các khối có chiều cao đã biết (đối với căn chỉnh dọc) hoặc chiều rộng (đối với căn chỉnh ngang).

Căn chỉnh bằng cách sử dụng phần đệm

Đôi khi, bạn không thể căn giữa một phần tử mà phải thêm đường viền cho phần tử đó bằng thuộc tính "padding".

Ví dụ: có một hình ảnh 200 x 200 pixel và bạn cần căn giữa nó thành một khối 240 x 300. Chúng ta có thể đặt chiều cao và chiều rộng của khối bên ngoài = 200px và thêm 20 pixel ở trên cùng và dưới cùng , và 50 ở bên trái và bên phải.

.example-wrapper1 ( nền : #535E73 ; chiều rộng : 200px ; chiều cao : 200px ; phần đệm : 20px 50px ; ) Căn chỉnh các khối được định vị tuyệt đối

Nếu một khối được đặt thành "vị trí: tuyệt đối", thì khối đó có thể được định vị tương đối với khối cha gần nhất của nó bằng "vị trí: tương đối". Để làm điều này, bạn cần gán cùng một giá trị cho tất cả các thuộc tính (“top”, “right”, “bottom”, “left”) của khối bên trong, cũng như “margin: auto”.

*Có một sắc thái: Chiều rộng (chiều cao) của khối bên trong + giá trị bên trái (phải, dưới, trên) không được vượt quá kích thước của khối cha. Sẽ an toàn hơn khi gán 0 (không) cho các thuộc tính bên trái (phải, dưới, trên).

.example-wrapper2 ( vị trí : tương đối ; chiều cao : 250px ; nền : url(space.jpg) ; ) .cat-king ( chiều rộng : 200px ; chiều cao : 200px ; vị trí : tuyệt đối ; đỉnh : 0 ; trái : 0 ; đáy : 0 ; phải : 0 ; lề : auto ; nền : url(king.png) ; ) Căn chỉnh theo chiều ngang Căn chỉnh bằng cách sử dụng "text-align: center"

Để căn chỉnh văn bản trong một khối, có một thuộc tính đặc biệt là "text-align". Khi đặt thành "center", mỗi dòng văn bản sẽ được căn chỉnh theo chiều ngang. Đối với văn bản nhiều dòng, giải pháp này cực kỳ hiếm khi được sử dụng; tùy chọn này thường được tìm thấy để căn chỉnh các nhịp, liên kết hoặc hình ảnh.

Tôi đã từng phải tạo một số văn bản để cho thấy cách căn chỉnh văn bản hoạt động khi Trợ giúp CSS, nhưng không có gì thú vị đến với tâm trí. Lúc đầu tôi quyết định sao chép nó ở đâu đó ươm vần, nhưng tôi nhớ rằng điều này có thể làm hỏng tính độc đáo của bài viết và những độc giả thân yêu của chúng tôi sẽ không thể tìm thấy nó trên Google. Và sau đó tôi quyết định viết đoạn này - suy cho cùng thì vấn đề không phải ở nó mà là sự thẳng hàng.

.example-text ( text-align : center ; phần đệm : 10px ; nền : #FF90B8 ; )

Điều đáng chú ý là thuộc tính này sẽ hoạt động không chỉ với văn bản mà còn với bất kỳ phần tử nội tuyến("Hiển thị nội dòng").

Tuy nhiên, văn bản này được căn chỉnh sang trái nhưng nằm trong một khối được căn giữa so với trình bao bọc.

.example-wrapper3 ( text-align : center ; nền : #FF90B8 ; ) .inline-text ( display : inline-block ; width : 40% ; đệm : 10px ; text-align : left ; nền : #FFE5E5 ; ) Căn chỉnh khối sử dụng lề

Các phần tử khối có chiều rộng đã biết có thể dễ dàng được căn chỉnh theo chiều ngang bằng cách đặt chúng thành "margin-left: auto; Margin-right: auto". Thông thường ký hiệu viết tắt được sử dụng: "margin: 0 auto" (bất kỳ giá trị nào cũng có thể được sử dụng thay vì 0). Nhưng phương pháp này không phù hợp với việc căn chỉnh theo chiều dọc.

.lama-wrapper ( chiều cao : 200px ; nền : #F1BF88 ; ) .lama1 ( chiều cao : 200px ; chiều rộng : 200px ; nền : url(lama.jpg) ; lề : 0 tự động ; )

Đây là cách bạn nên căn chỉnh tất cả các khối, nếu có thể (khi không yêu cầu định vị cố định hoặc tuyệt đối) - đó là cách hợp lý và đầy đủ nhất. Mặc dù điều này có vẻ hiển nhiên nhưng đôi khi tôi cũng thấy những ví dụ đáng sợ có dấu thụt âm, vì vậy tôi quyết định làm rõ.

Căn dọc

Với sự liên kết theo chiều dọc nhiều nhiều vấn đề hơn- rõ ràng là điều này không được cung cấp trong CSS. Có một số cách để đạt được kết quả mong muốn, nhưng tất cả chúng đều không đẹp lắm.

Căn chỉnh với thuộc tính chiều cao dòng

Trong trường hợp chỉ có một dòng trong một khối, bạn có thể căn chỉnh theo chiều dọc bằng cách sử dụng thuộc tính "line-height" và đặt nó ở độ cao mong muốn. Để đảm bảo an toàn, bạn cũng nên đặt “height”, giá trị của nó sẽ bằng giá trị của “line-height”, vì giá trị sau không được hỗ trợ trong tất cả các trình duyệt.

.example-wrapper4 ( line-height : 100px ; color : #DC09C0 ; Background : #E5DAE1 ; Height : 100px ; text-align : center ; )

Cũng có thể đạt được sự liên kết khối với một số dòng. Để làm điều này, bạn sẽ phải sử dụng một khối bao bọc bổ sung và đặt chiều cao dòng cho nó. Khối bên trong có thể có nhiều dòng nhưng phải là "nội tuyến". Bạn cần áp dụng "vertical-align: middle" cho nó.

.example-wrapper5 ( line-height : 160px ; chiều cao : 160px ; font-size : 0 ; nền : #FF9B00 ; ) .example-wrapper5 .text1 ( display : inline-block ; font-size : 14px ; line-height : 1.5 ; căn chỉnh dọc : giữa ; nền : #FFFFAF2 ; màu sắc : #FF9B00 ; căn chỉnh văn bản : giữa ; )

Khối trình bao bọc phải được đặt "font-size: 0". Nếu bạn không đặt cỡ chữ về 0, trình duyệt sẽ thêm một vài pixel phụ. Bạn cũng sẽ phải chỉ định kích thước phông chữ và chiều cao dòng cho khối bên trong, vì các thuộc tính này được kế thừa từ khối cha.

Căn chỉnh theo chiều dọc trong bảng

Thuộc tính "vertical-align" cũng ảnh hưởng đến các ô của bảng. C đặt giá trị"ở giữa", nội dung bên trong ô được căn chỉnh về giữa. Chắc chắn, cách bố trí bảng ngày nay được coi là cổ xưa, nhưng trong những trường hợp đặc biệt, nó có thể được mô phỏng bằng cách chỉ định "display: table-cell".

Tôi thường sử dụng tùy chọn này để căn chỉnh theo chiều dọc. Dưới đây là một ví dụ về bố cục được lấy từ một dự án đã hoàn thành. Hình ảnh được căn giữa theo chiều dọc theo cách này mới là điều đáng quan tâm.

.one_product .img_wrapper ( display : ô bảng ; chiều cao : 169px ; căn chỉnh dọc : giữa ; tràn : ẩn ; nền : #fff ; chiều rộng : 255px ; ) .one_product img ( chiều cao tối đa : 169px ; chiều rộng tối đa : 100 %; chiều rộng tối thiểu: 140px; hiển thị: khối; lề: 0 tự động; )

Cần nhớ rằng nếu một phần tử có tập "float" khác với "none", thì trong mọi trường hợp, nó sẽ là khối (hiển thị: khối) - khi đó bạn sẽ phải sử dụng một trình bao bọc khối bổ sung.

Căn chỉnh với phần tử nội tuyến bổ sung

Và đối với các phần tử nội tuyến, bạn có thể sử dụng "vertical-align: middle". Điều này sẽ căn chỉnh tất cả các phần tử có "display: inline" nằm trên cùng một đường so với đường trung tâm chung.

Bạn cần tạo một khối phụ có chiều cao chiều cao bằng nhau khối cha thì khối mong muốn sẽ được căn giữa. Để làm điều này, thật thuận tiện khi sử dụng các phần tử giả:trước hoặc:sau.

.example-wrapper6 ( chiều cao : 300px ; căn chỉnh văn bản : giữa ; nền : #70DAF1 ; ) .pudge ( hiển thị : khối nội tuyến ; căn chỉnh dọc : giữa ; nền : url(pudge.png) ; màu nền : # fff ; chiều rộng : 200px ; chiều cao : 200px ; ) .riki ( hiển thị : khối nội tuyến ; chiều cao : 100% ; căn chỉnh dọc : giữa ; ) Hiển thị: flex và căn chỉnh

Nếu bạn không quan tâm nhiều đến người dùng Explorer 8 hoặc quan tâm đến mức sẵn sàng chèn thêm một đoạn javascript cho họ, thì bạn có thể sử dụng "display: flex". Hộp Flex rất hữu ích trong việc giải quyết các vấn đề căn chỉnh và chỉ cần viết "margin: auto" để căn giữa nội dung bên trong.

Cho đến nay, tôi thực tế chưa bao giờ gặp phải phương pháp này, nhưng không có hạn chế đặc biệt nào đối với nó.

.example-wrapper7 ( display : flex ; chiều cao : 300px ; nền : #AEB96A ; ) .example-wrapper7 img ( lề : auto ; )

Chà, đó là tất cả những gì tôi muốn viết về Căn chỉnh CSS. Bây giờ việc căn giữa nội dung sẽ không còn là vấn đề nữa!

Rất thường xuyên trong bố cục, cần phải căn giữa một số phần tử theo chiều ngang và/hoặc chiều dọc. Vì vậy, tôi quyết định làm một bài viết với những cách khác tập trung để mọi thứ đều ở trong tầm tay ở một nơi.

Lề căn chỉnh ngang: tự động

Căn chỉnh theo chiều ngang sử dụng lề được sử dụng khi biết chiều rộng của phần tử ở giữa. Hoạt động cho các phần tử khối:

Elem ( lề trái: auto; lề phải: auto; chiều rộng: 50%; )

Việc chỉ định tự động cho lề phải và trái làm cho chúng bằng nhau, giúp phần tử căn giữa theo chiều ngang trong khối cha.

căn chỉnh văn bản: giữa

Phương pháp này phù hợp để căn giữa văn bản trong một khối. căn chỉnh văn bản: giữa:

Căn chỉnh với text-align .wrapper ( text-align: center; )

Tôi căn giữa

vị trí và lề âm còn lại

Thích hợp cho việc định tâm các khối có chiều rộng đã biết. Đặt vị trí: liên quan đến khối cha để định vị tương đối với nó, căn giữa yếu tố vị trí: tuyệt đối, trái: 50% và lề trái âm có giá trị bằng một nửa chiều rộng của phần tử:

Căn chỉnh với sử dụng vị trí.wrapper ( vị trí: tương đối; ) .wrapper p ( trái: 50%; lề: 0 0 0 -100px; vị trí: tuyệt đối; chiều rộng: 200px; )

Tôi căn giữa

hiển thị: khối nội tuyến + căn chỉnh văn bản: trung tâm

Phương pháp này phù hợp để căn chỉnh các khối có chiều rộng không xác định, nhưng yêu cầu phải có trình bao bọc cha. Ví dụ: bạn có thể căn giữa menu ngang theo cách này:

Căn chỉnh với màn hình: inline-block + text-align: center; .navigation ( text-align: center; ) .navigation li ( display: inline-block; )

Chiều cao dòng căn chỉnh dọc

Để căn chỉnh một dòng văn bản, bạn có thể sử dụng cùng giá trịđộ cao và khoảng cách dòng cho khối cha. Thích hợp cho các nút, mục menu, v.v.

chiều cao dòng .wrapper ( chiều cao: 100px; chiều cao dòng: 100px; )

Tôi được căn chỉnh theo chiều dọc

vị trí và ký quỹ âm tăng lên

Một phần tử có thể được căn chỉnh theo chiều dọc bằng cách đặt cho nó một chiều cao cố định và áp dụng vị trí: tuyệt đối và lề âm lên bằng một nửa chiều cao của phần tử được căn chỉnh. Khối cha mẹ phải được cung cấp vị trí: tương đối:

Trình bao bọc ( vị trí: tương đối; ) elem ( chiều cao: 200px; lề: -100px 0 0; vị trí: tuyệt đối; trên cùng: 50%; )

Vì vậy việc sử dụng định vị và lợi nhuận âm, bạn có thể căn giữa một phần tử trên trang.

hiển thị: ô bảng

Vì căn chỉnh theo chiều dọcáp dụng thuộc tính hiển thị: ô bảng cho phần tử, điều này khiến nó mô phỏng một ô trong bảng. Chúng tôi cũng đặt chiều cao và căn chỉnh dọc: giữa của nó. Hãy gói tất cả những thứ này vào một thùng chứa với thuộc tính dislpay: table; . :

Hiển thị căn chỉnh dọc: table-cell .wrapper ( display: table; width: 100%; ) .cell ( display: table-cell; Height: 100px; Vertical-align: middle; )

Tôi được căn chỉnh theo chiều dọc

Căn chỉnh động của một phần tử trên một trang

Chúng tôi đã xem xét các cách căn chỉnh các thành phần trên một trang bằng CSS. Bây giờ chúng ta hãy xem cách triển khai jQuery.

Hãy kết nối jQuery với trang:

Tôi đề nghị viết chức năng đơn giản căn giữa một phần tử trên trang, hãy gọi nó là AlignCenter() . Bản thân phần tử này đóng vai trò là đối số của hàm:

Hàm AlignCenter(elem) ( // code ở đây )

Trong phần thân của hàm, chúng ta sẽ tự động tính toán và gán tọa độ của tâm trang Thuộc tính CSS trái và trên:

Hàm căn chỉnhCenter(elem) ( elem.css(( left: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - elem. Height()) / 2 + "px" // đừng quên thêm vị trí: tuyệt đối vào phần tử để kích hoạt tọa độ )) )

Trong dòng đầu tiên của hàm, chúng ta lấy chiều rộng của tài liệu và trừ đi chiều rộng của phần tử, chia làm đôi - đây sẽ là tâm ngang của trang. Dòng thứ hai thực hiện tương tự, chỉ có chiều cao để căn chỉnh theo chiều dọc.

Hàm đã sẵn sàng, tất cả những gì còn lại là gắn nó vào các sự kiện sẵn sàng của DOM và thay đổi kích thước cửa sổ:

$(function() ( // gọi hàm căn giữa khi DOM đã sẵn sàngalignCenter($(elem)); // gọi hàm khi thay đổi kích thước cửa sổ $(window).resize(function() ( AlignCenter($(elem) )); )) // hàm căn giữa phần tử function AlignCenter(elem) ( elem.css(( // tính tọa độ trái và tọa độ trên cùng bên trái: ($(window).width() - elem.width()) / 2 + " px", top: ($(window).height() - elem.height()) / 2 + "px" )) ) ))

Ứng dụng của Flexbox

Các tính năng CSS3 mới, chẳng hạn như Flexbox, đang dần trở nên phổ biến. Công nghệ giúp tạo đánh dấu mà không cần sử dụng float, định vị, v.v. Nó cũng có thể được sử dụng để căn giữa các phần tử. Ví dụ: áp dụng Flexbox cho phần tử gốc.wrapper và căn giữa nội dung bên trong:

Trình bao bọc ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; Height: 500px; width: 500px; ) .wrapper .content ( lề: auto; /* lề: 0 tự động; chỉ ngang */ /* lề: auto 0; chỉ dọc */ ) Lorem ipsum dolor sit amet

Quy tắc này căn giữa phần tử theo chiều ngang và chiều dọc cùng một lúc - lề giờ đây không chỉ hoạt động đối với căn chỉnh theo chiều ngang mà còn đối với chiều dọc. Và không có chiều rộng/chiều cao đã biết.

Tài nguyên liên quan Trợ giúp dự án

Khi trình bày một trang, thường phải căn chỉnh trung tâm CSS-way: ví dụ: căn giữa khối chính. Có một số tùy chọn để giải quyết vấn đề này, mỗi tùy chọn 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 ở giữa

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

căn chỉnh văn bản:giữa;

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

Thông thường trên các trang, căn chỉnh được gán cho chính thẻ đó. Điều này ngay lập tức làm mất hiệu lực mã vì W3C đã không dùng thuộc tính căn chỉnh nữa. Sử dụng nó trên một trang không được khuyến khích.

Căn chỉnh một khối vào trung tâm

Nếu bạn cần căn giữa một div, CSS có thể cung cấp khá nhiều Một cách thuận tiện: cách sử dụng lề lề. Thụt lề có thể được đặt cho cả phần tử khối và phần tử khối nội tuyến. Giá trị thuộc tính phải là 0 (đệm dọc) và auto (đệm ngang tự động):

lề: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 phần đệm bên ngoài cũng cho phép bạn đặt hình ảnh ở giữa: nó cho phép bạn giải quyết nhiều vấn đề liên quan đến vị trí của một thành phần trên trang.

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

Đôi khi không cần căn chỉnh trung tâm CSS, nhưng bạn cần đặt hai khối cạnh nhau: một khối ở cạnh trái, khối kia ở bên phải. Đối với điều này có tài sản nổi, có thể nhận 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ẽ như thế này:

.left (float:left;)
.right(float:right)

Nếu cũng có khối thứ ba, khối này phải nằm dưới hai khối đầu tiên (ví dụ: chân trang), thì nó cần được cung cấp thuộc tính clear:

.left (float:left;)
.right(float:right)
chân trang (rõ ràng: cả hai)

Thực tế là các khối có các lớp trái và phải nằm ngoài luồng chung, nghĩa là tất cả các phần tử khác đều bỏ qua sự tồn tại của các phần tử được căn chỉnh. Thuộc tính clear:both 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ử đã rơi ra khỏi luồng và cấm thả nổi ở cả bên trái và bên phải. Do đó, trong ví dụ của chúng tôi, phần chân trang sẽ di chuyển xuống.

Căn dọc

Có những trường hợp việc căn lề giữa bằng các phương pháp CSS là không đủ; bạn cũng cần phải thay đổi vị trí thẳng đứng khối con. Bất kỳ phần tử khối nội tuyến hoặc khối nội tuyến nào cũng có thể được lồng ở cạnh trên hoặc dưới, ở giữa phần tử cha hoặc ở bất kỳ vị trí nào. Thông thường, khối cần được căn chỉnh về giữa; đối với điều này, thuộc tính căn chỉnh dọc được sử dụng. Giả sử có hai khối, một khối lồng vào nhau. trong đó đơn vị trong nhà— phần tử khối nội tuyến (hiển thị: khối nội tuyến). Bạn cần căn chỉnh khối con theo chiều dọc:

căn chỉnh trên cùng - .child(vertical-align:top);
căn giữa - .child(vertical-align:middle);
căn chỉnh bằng Giơi hạn dươi- .child(vertical-align:bottom);

TRÊN khối phần tử cả căn chỉnh văn bản và căn chỉnh dọc đều không có tác dụng gì.

Các vấn đề có thể xảy ra với các khối được căn chỉnh

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

.second(float:left)
.third(float:right)
.clearfix(height:0; clear: cả hai;)

Lớp giả:after thường được sử dụng, điều này cũng cho phép bạn trả các khối về vị trí của chúng bằng cách tạo một miếng đệm giả (trong ví dụ, một div có lớp chứa nằm bên trong.first và contains.left và.right) :

.left(float:left)
.right(float:right)
.container:after(content:""; display:table; clear:both;)

Các tùy 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 ra cách đơn giản và thuận tiện nhất để tạo một miếng đệm giả thông qua thử nghiệm.

Một vấn đề khác mà các nhà thiết kế bố cục thường gặp phải là việc căn chỉnh các phần tử khối nội tuyến. Một khoảng trống sẽ tự động được thêm vào sau mỗi khoảng trống. Giúp đối phó với điều này tài sản ký quỹ, được cho một mức ký quỹ âm. Có các phương pháp khác được sử dụng ít thường xuyên hơn: ví dụ: về 0. Trong trường hợp này, cỡ chữ: 0 được ghi trong 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ì trong thuộc tính của các phần tử khối nội tuyến, nó đã được trả về đúng kích cỡ nét chữ. Ví dụ: cỡ 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 tùy chọn thụt lề bên ngoài thường được sử dụng nhiều hơn.

Việc căn chỉnh các khối cho phép bạn tạo ra những khối đẹp và trang chức năng: điều này bao gồm cách bố trí bố cục chung, cách sắp xếp hàng hóa trong các cửa hàng trực tuyến và ảnh trên trang web danh thiếp.