Thực đơn
trang chủHướng dẫn

Căn chỉnh theo chiều dọc Css. Căn chỉnh theo chiều ngang và chiều dọc của các phần tử trong CSS

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 (để căn chỉnh theo chiều dọc) hoặc chiều rộng (để căn chỉnh theo chiều 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". Để thực hiện việc 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 nghĩ ra một số văn bản để chỉ ra cách căn chỉnh văn bản hoạt động bằng cách sử dụng CSS, nhưng tôi không nghĩ ra điều gì thú vị. Lúc đầu, tôi quyết định sao chép một bài đồng dao dành cho trẻ em ở đâu đó, 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 ; )

Cần lưu ý rằng thuộc tính này sẽ hoạt động không chỉ cho văn bản mà còn cho bất kỳ thành phần nội tuyến nào ("display: inline").

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

Căn chỉnh theo chiều dọc có nhiều vấn đề hơn - rõ ràng, đ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 ; nền : #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. Với giá trị được đặt thành "giữa", nội dung bên trong ô sẽ được căn chỉnh về giữa. Tất nhiê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, bạn có thể mô phỏng nó 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 bằng chiều cao của khối cha, sau đó 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 thực hiện một bài viết với nhiều cách căn giữa khác nhau để mọi thứ đều ở 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. Chúng tôi cung cấp cho khối cha vị trí: tương đối so với vị trí tương đối với nó, phần tử ở giữa 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 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; )

  • trang chủ
  • Giới thiệu về tác giả

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 các giá trị chiều 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 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%; )

Bằng cách này, bằng cách sử dụng vị trí và lề âm, bạn có thể căn giữa một phần tử trên trang.

hiển thị: ô bảng

Để căn chỉnh theo chiều dọc, thuộc tính display: table-cell được áp dụng cho phần tử, buộc phần tử này phải 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 khuyên bạn nên viết một hàm đơ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 nội dung của hàm, chúng tôi tính toán linh hoạt và gán tọa độ của tâm trang cho các thuộc tính CSS left và top:

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

Nếu bạn cắt vào bất kỳ trang web nào được tạo trên cơ sở html, thì bạn sẽ thấy một cấu trúc phân lớp nhất định. Hơn nữa, hình dáng của nó sẽ giống như một chiếc bánh nhiều lớp. Nếu bạn nghĩ như vậy thì rất có thể bạn đã lâu rồi chưa ăn gì. Vì vậy, trước tiên hãy thỏa mãn cơn đói của bạn và sau đó chúng tôi sẽ cho bạn biết cách căn giữa lớp div trên trang web của bạn:

Ưu điểm của bố cục sử dụng thẻ

Có hai loại cấu trúc trang web chính:

  • dạng bảng;
  • Khối.

Bố cục dạng bảng chiếm ưu thế ngay cả vào buổi bình minh của Internet. Ưu điểm của nó bao gồm độ chính xác của vị trí được chỉ định. Nhưng tuy nhiên, nó có những thiếu sót rõ ràng. Những vấn đề chính là độ dài của mã và tốc độ tải thấp.

Khi sử dụng bố cục bảng, trang web sẽ không được hiển thị cho đến khi được tải hoàn toàn. Trong khi khi sử dụng khối div thì các phần tử được hiển thị ngay lập tức.

Ngoài tốc độ tải cao, việc xây dựng khối trang web cho phép bạn giảm số lượng mã html nhiều lần. Bao gồm thông qua việc sử dụng các lớp CSS.

Tuy nhiên, nên sử dụng bố cục dạng bảng để cấu trúc hiển thị dữ liệu trên trang. Một ví dụ điển hình về việc sử dụng nó là hiển thị các bảng.

Việc xây dựng khối dựa trên thẻ còn được gọi là từng lớp và bản thân các khối được gọi là lớp. Điều này là do khi sử dụng một số giá trị thuộc tính nhất định, chúng có thể được xếp chồng lên nhau, tương tự như các lớp trong Photoshop.

Hỗ trợ định vị

Trong bố cục khối, tốt hơn là định vị các lớp bằng cách sử dụng các biểu định kiểu xếp tầng. Thuộc tính CSS chính chịu trách nhiệm bố cục là float.
Cú pháp thuộc tính:
phao: trái | đúng | không | thừa kế
Ở đâu:

  • left – căn chỉnh phần tử ở cạnh trái của màn hình. Dòng chảy xung quanh các phần tử còn lại xảy ra ở bên phải;
  • right – căn chỉnh ở bên phải, bao quanh các phần tử khác – ở bên trái;
  • không – không được phép gói;
  • kế thừa – kế thừa giá trị của phần tử cha.

Hãy xem một ví dụ đơn giản về định vị div bằng thuộc tính này:

#left ( chiều rộng: 200px; chiều cao: 100px; float: trái; nền: rgb(255,51,102); ) #right ( chiều rộng: 200px; chiều cao: 100px; float: phải; nền: rgb(0,255,153); ) Khối bên trái Khối bên phải


Bây giờ chúng ta sẽ cố gắng sử dụng thuộc tính tương tự để định vị div thứ ba ở giữa trang. Nhưng tiếc là float không có giá trị trung tâm. Và khi bạn cung cấp cho một khối mới một giá trị căn chỉnh sang phải hoặc trái, nó sẽ được dịch chuyển theo hướng đã chỉ định. Do đó, tất cả những gì còn lại là đặt float: left cho cả ba khối:


Nhưng đây cũng không phải là lựa chọn tốt nhất. Khi cửa sổ giảm kích thước, tất cả các lớp được xếp thành một hàng theo chiều dọc và khi tăng kích thước, chúng dính vào cạnh trái của cửa sổ. Vì vậy, chúng ta cần một cách tốt hơn để căn giữa div.

Lớp định tâm

Trong ví dụ tiếp theo, chúng tôi sẽ sử dụng lớp chứa trong đó chúng tôi sẽ đặt các phần tử còn lại. Điều này giải quyết vấn đề các khối di chuyển tương đối với nhau khi kích thước cửa sổ thay đổi. Việc căn giữa vùng chứa ở giữa được thực hiện bằng cách đặt thuộc tính lề về 0 cho lề từ cạnh trên và auto ở hai bên (margin: 0 auto ):

#container ( chiều rộng: 600px; lề: 0 tự động; ) #left ( chiều rộng: 200px; chiều cao: 100px; float: trái; nền: rgb(255,51,102); ) #right ( chiều rộng: 200px; chiều cao: 100px; float : trái; nền: rgb(0,255,153); ) #center ( chiều rộng: 200px; chiều cao: 100px; float: trái; nền: rgb(255,0,0); ) Khối bên trái Khối trung tâm Khối bên phải


Ví dụ tương tự cho thấy cách bạn có thể căn giữa div theo chiều ngang. Và nếu bạn chỉnh sửa một chút đoạn mã trên, bạn có thể đạt được sự căn chỉnh theo chiều dọc của các khối. Để làm điều này, bạn chỉ cần thay đổi độ dài của lớp chứa (giảm nó). Nghĩa là, sau khi chỉnh sửa lớp css của nó sẽ trông như thế này:

Sau khi thay đổi, tất cả các khối sẽ xếp thẳng hàng ở giữa. Và vị trí của chúng sẽ không thay đổi bất kể kích thước cửa sổ trình duyệt. Đây là cách căn giữa theo chiều dọc của một div trông như thế nào:


Trong ví dụ sau, chúng tôi đã sử dụng một số thuộc tính css mới để căn giữa các lớp bên trong một vùng chứa:

#container ( chiều rộng: 450px; chiều cao: 150px; lề: 0 tự động; màu nền: #66CCFF; ) #left ( chiều rộng: 100px; chiều cao: 100px; nền: rgb(255,51,102); hiển thị: khối nội tuyến; căn chỉnh dọc: giữa; lề trái: 35px; ) #right ( chiều rộng: 100px; chiều cao: 100px; nền: rgb(0,255,153); hiển thị: khối nội tuyến; căn chỉnh dọc: giữa; lề trái: 35px; ) #center ( chiều rộng: 100px; chiều cao: 100px; nền: rgb(255,0,0); hiển thị: khối nội tuyến; căn chỉnh dọc: giữa; lề trái: 35px; )


Một mô tả ngắn về các thuộc tính css và giá trị của chúng mà chúng tôi đã sử dụng trong ví dụ này để căn giữa một div trong div:

  • display: inline-block – căn chỉnh một phần tử khối thành một dòng và đảm bảo nó bao quanh một phần tử khác;
  • Vertical-align: middle – căn chỉnh phần tử ở giữa so với phần tử gốc;
  • lề trái – đặt lề trái.
Cách tạo liên kết từ một lớp

Nghe có vẻ kỳ lạ nhưng điều này là có thể. Đôi khi khối div làm liên kết có thể cần thiết khi bố trí nhiều loại menu khác nhau. Hãy xem một ví dụ thực tế về việc triển khai lớp liên kết:

#layer1( chiều rộng: 500px; chiều cao: 100px; nền: rgb(51,255,204); đường viền:groove; ) a ( display: block; căn chỉnh văn bản: giữa; chiều cao: 100%; màu: rgb(255,0,51) ;) Liên kết đến trang web của chúng tôi


Trong ví dụ này, bằng cách sử dụng dòng display: block, chúng ta đặt liên kết thành giá trị của phần tử khối. Và để toàn bộ chiều cao của khối div trở thành một liên kết, hãy đặt chiều cao: 100%.

Ẩn và hiển thị các phần tử khối

Các phần tử khối mang lại nhiều cơ hội hơn để mở rộng chức năng của giao diện so với bố cục dạng bảng đã lỗi thời. Điều thường xảy ra là thiết kế trang web là duy nhất và dễ nhận biết. Nhưng đối với sự độc quyền như vậy, bạn phải trả giá bằng việc thiếu không gian trống.

Điều này đặc biệt đúng đối với trang chính, trang có chi phí quảng cáo cao nhất. Vì vậy, vấn đề đặt ra là phải “đẩy” một banner quảng cáo khác vào đâu. Và ở đây bạn không thể tránh khỏi việc căn chỉnh div vào giữa trang!

Một giải pháp hợp lý hơn là ẩn đi một số khối. Đây là một ví dụ đơn giản về việc triển khai như vậy:

#layer1( display:block; chiều rộng: 500px; chiều cao: 100px; nền: rgb(51,255,204); border:groove; ) hàm show() ( if(layer1=="none") ( layer1="block"; ) else ( layer1="none"; ) document.getElementById("layer1").style.display=layer1; )

Đây là nút ma thuật. Nhấp vào nó sẽ ẩn hoặc hiển thị khối ẩn.


Trong ví dụ này, vị trí của các khối div không thay đổi chút nào. Điều này sử dụng một hàm JavaScript đơn giản để thay đổi giá trị của thuộc tính hiển thị css sau khi nhấp vào nút (sự kiện onclick).

cú pháp hiển thị:
hiển thị: khối | nội tuyến | khối nội tuyến | bảng nội tuyến | mục danh sách | không | chạy vào | bàn | chú thích bảng | ô bảng | bảng-cột-nhóm | cột bảng | nhóm-chân trang | nhóm tiêu đề bảng | hàng bảng | bảng-hàng-nhóm

Như bạn có thể thấy, thuộc tính này có thể nhận nhiều giá trị. Vì vậy nó rất hữu ích và có thể được sử dụng để định vị các phần tử. Trong một trong những ví dụ trước, chúng tôi đã sử dụng một trong các giá trị của nó (inline-block ) để căn giữa một div trong div.

Chúng tôi đã sử dụng hai giá trị cho thuộc tính display để ẩn và hiển thị lớp.

Tất cả những người làm việc với bố cục sớm hay muộn đều phải đối mặt với nhu cầu căn chỉnh các phần tử theo chiều dọc... và họ biết những khó khăn nào có thể nảy sinh khi căn chỉnh một phần tử vào giữa. Trong CSS có một thuộc tính `vertical-align` với nhiều giá trị mà về mặt logic sẽ thực hiện căn chỉnh dọc. Tuy nhiên, trên thực tế nó không hề hoạt động như mong đợi.

Có một số kỹ thuật để giải quyết vấn đề này. Dưới đây chúng ta sẽ xem xét kỹ hơn về từng người trong số họ.

1. Căn chỉnh bằng bảng

Trong trường hợp này, chúng ta thay thế khối bên ngoài bằng một bảng một ô. Căn chỉnh sẽ được áp dụng cho nội dung của ô, tức là khối bên trong.

HTML

CSS

Bên ngoài ( chiều rộng : 200px ; chiều cao : 200px ; căn chỉnh văn bản : giữa ; căn chỉnh dọc : giữa ; màu nền : #ffc ; )

Nhược điểm chính của giải pháp này, theo quan điểm ngữ nghĩa, là việc sử dụng bảng cho các mục đích khác ngoài mục đích dự định của nó. Nhược điểm thứ hai là việc tạo bảng yêu cầu thêm một phần tử khác xung quanh khối bên ngoài.

Nhược điểm đầu tiên có thể tránh được một phần bằng cách thay thế thẻ bảng bằng div và đặt chế độ hiển thị bảng trong CSS.

HTML

CSS

Trình bao bọc bên ngoài ( display : table ; ) .outer ( display : table-cell ; )

2. Căn chỉnh bằng cách thụt lề

Với điều kiện là chúng ta biết chiều cao của khối bên trong và bên ngoài, việc căn chỉnh có thể được đặt bằng cách sử dụng các vết lõm dọc của khối bên trong bằng công thức: (H bên ngoài – H bên trong) / 2.

CSS

Bên ngoài ( chiều cao : 200px ; ) . bên trong ( chiều cao : 100px ; lề : 50px 0 ; )

Nhược điểm của giải pháp là bắt buộc phải biết về chiều cao của cả hai khối.

3. Căn chỉnh theo chiều cao dòng

Nếu khối bên trong chiếm không quá một dòng văn bản thì bạn có thể sử dụng thuộc tính line-height và đặt nó bằng chiều cao của khối bên ngoài. Vì nội dung của khối bên trong không được bao bọc ở dòng thứ hai, nên bạn cũng nên thêm các quy tắc khoảng trắng: nowrap và tràn: ẩn.

CSS

Bên ngoài ( chiều cao : 200px ; chiều cao dòng : 200px ; ) . bên trong ( khoảng trắng : nowrap ; tràn : ẩn ; )

Phương pháp này cũng có thể được sử dụng để căn chỉnh văn bản nhiều dòng. Để thực hiện việc này, khối bên trong cần ghi đè giá trị chiều cao dòng, đồng thời thêm các quy tắc display: inline-block và Vertical-align: middle.

CSS

Bên ngoài ( chiều cao : 200px ; chiều cao dòng : 200px ; ) . bên trong ( chiều cao dòng : bình thường ; hiển thị : khối nội tuyến ; căn chỉnh dọc : giữa ; )

Nhược điểm của phương pháp này là phải biết chiều cao của khối bên ngoài.

4. Căn chỉnh bằng cách sử dụng “kéo dài”

Phương pháp này có thể được sử dụng khi chúng ta biết chiều cao của khối bên trong, nhưng chiều cao của khối bên ngoài thì không.

Để áp dụng phương pháp này chúng ta cần:

  • Đặt khối bên ngoài thành vị trí định vị tương đối: tương đối và khối bên trong thành vị trí tuyệt đối: tuyệt đối;
  • Thêm một số quy tắc top: 0 và Bottom: 0 vào khối bên trong, do đó nó sẽ kéo dài đến toàn bộ chiều cao của khối bên ngoài;
  • Đặt phần đệm dọc của khối bên trong thành auto .
CSS

Bên ngoài ( vị trí : tương đối ; ) . bên trong ( chiều cao : 100px ; vị trí : tuyệt đối ; trên cùng : 0 ; dưới cùng : 0 ; lề : tự động 0 ; )

5. Căn chỉnh lề trên âm

Tương tự như phương pháp trước, phương pháp này được sử dụng khi không biết chiều cao của khối bên ngoài nhưng đã biết chiều cao của khối bên trong.

Bạn cần đặt khối bên ngoài thành vị trí tương đối và khối bên trong thành định vị tuyệt đối. Sau đó di chuyển khối bên trong xuống một nửa chiều cao của khối bên ngoài top: 50% và nâng nó lên một nửa chiều cao của chính nó lề-top: -Hinner / 2 .

CSS

Bên ngoài ( vị trí : tương đối ; ) . bên trong ( chiều cao : 100px ; vị trí : tuyệt đối ; trên cùng : 50% ; lề trên : -50px ; )

Nhược điểm của phương pháp này là phải biết chiều cao của dàn lạnh.

6. Căn chỉnh bằng phép biến đổi

Phương pháp này có thể được sử dụng khi không xác định được độ cao của dàn lạnh. Bạn cần di chuyển khối bên trong xuống một nửa chiều cao của khối bên ngoài: 50%, sau đó sử dụng thuộc tính biến đổi và di chuyển nó trở lại bằng cách sử dụng hàm dịchY(-50%).

CSS

Bên ngoài ( vị trí : tương đối ; ) . bên trong ( vị trí : tuyệt đối ; trên cùng : 50% ; biến đổi : dịchY (-50% ); )

7. Căn chỉnh với phần tử giả

Đây là phương pháp phổ biến nhất có thể được sử dụng khi không biết chiều cao của cả hai khối.

Bản chất của phương pháp này là thêm một khối nội tuyến có chiều cao 100% bên trong khối bên ngoài và gán cho nó căn chỉnh theo chiều dọc. Như vậy, chiều cao của khối được thêm vào sẽ bằng chiều cao của khối bên ngoài. Khối trong nhà sẽ được căn chỉnh theo chiều dọc so với khối được thêm vào và do đó là khối bên ngoài.

Để không vi phạm ngữ nghĩa, nên thêm khối nội tuyến bằng cách sử dụng các phần tử giả trước hoặc sau.

CSS

Bên ngoài :trước ( display : inline-block ; chiều cao : 100% ; căn chỉnh dọc : giữa ; nội dung : "" ; ) .inner ( display : inline-block ; Vertical-align : middle ; )

Nhược điểm của phương pháp này là không thể sử dụng với vị trí tuyệt đối của dàn lạnh.

8. Căn chỉnh với Flexbox

Cách căn chỉnh theo chiều dọc hiện đại nhất là sử dụng Bố cục hộp linh hoạt (hay gọi tắt là Flexbox). Nó cho phép bạn kiểm soát linh hoạt vị trí của các thành phần trên trang, sắp xếp chúng ở hầu hết mọi nơi. Căn giữa cho Flexbox là một công việc rất đơn giản.

Vấn đề căn giữa các phần tử theo chiều dọc trong CSS có một số giải pháp có sẵn. Việc lựa chọn phương pháp căn chỉnh trong từng trường hợp riêng lẻ phụ thuộc vào loại, kích thước, vị trí của các phần tử và các thuộc tính khác được chỉ định cho chúng.

Dưới đây là một số kỹ thuật căn chỉnh dọc phổ biến trong số các nhà thiết kế bố cục. Nó cho thấy cách chúng hoạt động và trong trường hợp nào thì chúng phù hợp nhất.

Đây là hai phần tử div:



Mỗi phương pháp sẽ được sử dụng để căn chỉnh dàn lạnh với tâm của dàn nóng.

chiều cao dòng cho một dòng

Khi phần tử cha chiếm một dòng văn bản và đã biết chiều cao của phần tử con, thuộc tính line-height có thể được áp dụng. Giá trị thuộc tính phải bằng chiều cao của khối bên ngoài. Điều này chỉ hoạt động trên một dòng, vì vậy sẽ rất hữu ích nếu thêm tràn: ẩn và khoảng trắng: nowrap cho trẻ.

Sẽ không thể sử dụng ký hiệu phần trăm line-height=100%, vì 100% trong trường hợp này là chiều cao phông chữ.

Thùng đựng hàng (
chiều cao: 300px;
chiều cao dòng: 300px;
}

Bên trong (
khoảng trắng: nowrap;
tràn: ẩn;
}

Phương pháp này chỉ có thể áp dụng nếu biết chiều cao của khối bên ngoài.

Bảng được căn chỉnh theo chiều dọc

Một bảng là lý tưởng cho việc căn chỉnh các phần tử theo chiều dọc. Để không vi phạm ngữ nghĩa, tốt hơn hết bạn nên tạo các thành phần bảng bằng CSS. Vị trí của nội dung trong ô được điều khiển bằng cách căn chỉnh theo chiều dọc. Có bốn giá trị cho thuộc tính này trong bảng:

Đường cơ sở - mặc định;
. đáy - nội dung ở cuối ô;
. giữa - nội dung ở giữa ô;
. top - nội dung ở đầu ô.

Trong ví dụ đầu tiên, một ô của bảng sẽ trở thành khối bên ngoài.

Thùng đựng hàng (
hiển thị: ô bảng;
căn dọc: giữa;
}

Điểm hay của phương pháp này là nó hoạt động với các phần tử không có chiều cao nhất định, nhưng trong một số trường hợp, việc sử dụng nó bị cản trở bởi thực tế là khối bên ngoài, giống như bất kỳ ô nào trong bảng, điều chỉnh độ rộng của nó cho phù hợp với nội dung của nó và bạn có thể kéo dài nó chỉ bằng cách thiết lập rõ ràng chiều rộng cho chiều rộng. Đối với một ô không có bảng, tỷ lệ phần trăm không hoạt động đầy đủ.

Thiếu sót này được khắc phục bằng cách gói ô trong ô mẹ của nó bằng thuộc tính display:table. Kích thước của phần tử này có thể được đặt dưới dạng phần trăm. Mã cuối cùng sẽ trông như thế này:

Bao bọc bên ngoài (
hiển thị: bảng;
}

Thùng đựng hàng (
hiển thị: ô bảng;
căn dọc: giữa;
}



Vị trí: biên độ tuyệt đối + âm

Phương thức này được sử dụng khi biết chiều cao của phần tử bên trong. Nó có thể không được biết đến bởi đơn vị bên ngoài. Cha mẹ được định vị tương đối và đứa trẻ bên trong nó được định vị tuyệt đối.

Giá trị thuộc tính top là 50% làm cho phần tử lồng nhau được định vị với cạnh trên của nó ở giữa khối bên ngoài. Tất cả những gì còn lại là nâng phần lề âm của nó lên một nửa chiều cao của chính nó để nó đứng chính xác ở giữa của chiều dọc.

Thùng đựng hàng (
vị trí: tương đối;
}

Bên trong (
chiều cao: 140px;
vị trí: tuyệt đối;
trên cùng: 50%;
lề trên: -70px;
}

Nhược điểm của phương pháp này là cần biết chiều cao của trẻ.

Căn chỉnh theo chiều dọc

Việc căn chỉnh các phần tử nội tuyến và khối nội tuyến, bao gồm hình ảnh và biểu tượng, trong văn bản xung quanh được thực hiện bằng thuộc tính căn chỉnh dọc. Không giống như bảng, trong trường hợp này toàn bộ tập hợp các giá trị được chỉ định trong đặc tả sẽ hoạt động.

Nếu biết chiều cao của phần tử gốc, thuộc tính này có thể được sử dụng để căn giữa văn bản nhiều dòng.

Đối với khối bên ngoài quy định căn giữa một đường.

Thùng đựng hàng (
chiều cao: 140px;
chiều cao dòng: 140px;
}

Giá trị chiều cao dòng cho khối bên trong được xác định lại thành giá trị bình thường hoặc bất kỳ giá trị mong muốn nào. Nó cũng được cung cấp căn chỉnh dọc-align: middle và chuyển đổi thành loại khối nội tuyến - display: inline-block.

Bên trong (
hiển thị: khối nội tuyến;
chiều cao dòng: bình thường;
căn dọc: giữa;
}

Nhược điểm của phương pháp này là bạn cần biết chiều cao của cha mẹ.

Căn chỉnh với biến đổi

Hàm dịch Y của thuộc tính biến đổi cho phép bạn căn giữa khối bên trong có chiều cao không xác định. Để làm được điều này, cha mẹ phải được định vị tương đối và con tuyệt đối.

Thuộc tính top có giá trị 50% sẽ hạ thấp khối bên trong sao cho cạnh trên của nó được đặt ở giữa khối mẹ của nó. Giá trị dịchY: -50% nâng phần tử lên một nửa chiều cao của chính nó và do đó căn chỉnh tâm dọc của các khối.

Thùng đựng hàng (
vị trí: tương đối;
}

Bên trong (
vị trí: tuyệt đối;
trên cùng: 50%;
biến đổi: dịchY(-50%);
}

Nhược điểm của kỹ thuật này là khả năng hỗ trợ hạn chế cho các chức năng chuyển đổi trong trình duyệt IE.

Căn chỉnh thông qua phần tử giả

Phương thức này hoạt động khi không xác định được chiều cao của khối thứ nhất và khối thứ hai. Phần tử giả khối nội tuyến được thêm vào bên trong phần tử gốc bằng cách sử dụng trước hoặc sau. Chiều cao của phần tử được thêm vào phải bằng chiều cao của phần tử gốc - chiều cao: 100%. Căn chỉnh theo chiều dọc của nội dung được đặt bằng cách sử dụng Vertical-align: middle.

Sử dụng căn chỉnh dọc: giữa, khối bên trong được căn chỉnh tương ứng với phần tử giả này. Vì phần tử cha và phần tử con có cùng chiều cao nên phần tử bên trong tuy được căn chỉnh theo chiều dọc với phần tử giả nhưng cũng được căn giữa với hộp bên ngoài.

Vùng chứa: trước (
nội dung: "";
chiều cao: 100%;
căn dọc: giữa;
hiển thị: khối nội tuyến;
}

Bên trong (
hiển thị: khối nội tuyến;
căn dọc: giữa;
}

Cách phổ quát. Không hoạt động nếu dàn lạnh được đặt ở vị trí tuyệt đối.

Flexbox

Cách mới nhất và dễ dàng nhất để căn chỉnh các phần tử theo chiều dọc. Flexbox cho phép bạn sắp xếp các thành phần của trang Web theo ý muốn. Để căn giữa một khối, bạn chỉ cần đặt display: flex cho khối cha và lề: auto cho khối con.

Thùng đựng hàng (
hiển thị: linh hoạt;
chiều rộng: 320px;
chiều cao: 140px;
}

Bên trong (
chiều rộng: 120px;
lề: tự động;
}

Flexbox chỉ hoạt động trong các trình duyệt hiện đại.

Lựa chọn một phương pháp

Việc sử dụng kỹ thuật căn chỉnh dọc nào sẽ tùy thuộc vào nhiệm vụ và những hạn chế có thể xuất hiện trong bất kỳ trường hợp cụ thể nào.

Chiều cao của các phần tử không xác định

Trong tình huống này, bạn có thể sử dụng một trong bốn phương pháp phổ biến:

1. Bảng. Cha mẹ trở thành một ô bảng được tạo bằng HTML hoặc thông qua bảng hiển thị/ô hiển thị. Phần tử cha này được cung cấp theo chiều dọc: giữa.

2. Phần tử giả. Đối với khối bên ngoài, phần tử giả khối nội tuyến được tạo với chiều rộng=100% và căn chỉnh dọc: giữa. Đứa trẻ được hiển thị: khối nội tuyến và căn chỉnh dọc: giữa. Phương pháp này không chỉ hoạt động khi khối bên trong được định vị tuyệt đối.

3. Biến đổi. Cha mẹ nhận được vị trí: tương đối. Đứa trẻ được cho vị trí: tuyệt đối, trên cùng: 50% và biến đổi: dịchY(-50%);

4. Hộp linh hoạt. Khối bên ngoài được đặt thành display: flex, khối bên trong được đặt thành lề: auto.

Chỉ có chiều cao của đứa trẻ được biết

Bộ phận bên ngoài được định vị tương đối; Phần tử bên trong được định vị tuyệt đối, trên cùng: 50% và lề trên bằng một nửa chiều cao của nó.

Một dòng trên mỗi khối với chiều cao đã biết

Khối bên ngoài được cấp một thuộc tính chiều cao dòng có giá trị bằng chiều cao của nó.

Chiều cao của khối bên ngoài được biết nhưng phần tử bên trong thì không.

Phần cha mẹ được cấp một chiều cao dòng bằng với chiều cao của nó. Chiều cao dòng của trẻ được xác định lại thành giá trị bình thường hoặc bất kỳ giá trị mong muốn nào và hiển thị: khối nội tuyến và căn chỉnh dọc: giữa được cấp cho nó.