CSS định vị dọc. Ví dụ về căn chỉnh theo chiều dọc

Căn chỉnh văn bản theo chiều dọc trong CSS- một công việc rất khó khăn. Tôi đã thấy đủ người vật lộn với vấn đề này đến nỗi tôi liên tục tìm ra những lỗi "nghiêm trọng" khi nói đến thiết kế đáp ứng thực tế.

Nhưng đừng lo: nếu bạn đang gặp khó khăn với việc căn chỉnh theo chiều dọc CSS thì bạn đã đến đúng nơi rồi.

Hãy nói về thuộc tính căn chỉnh dọc CSS

Khi mới bắt đầu làm việc trong lĩnh vực phát triển web, tôi gặp chút khó khăn với đặc tính này. Tôi nghĩ nó sẽ hoạt động như thế này tài sản cổ điển “căn chỉnh văn bản" Ôi, giá như mọi chuyện đơn giản như vậy...

Thuộc tính CSS căn chỉnh theo chiều dọc hoạt động tốt với các bảng, nhưng không hoạt động tốt với div hoặc các phần tử khác. Khi bạn sử dụng nó trên div, nó sẽ căn chỉnh phần tử tương ứng với các div khác chứ không căn chỉnh nội dung của nó. Trong trường hợp này, thuộc tính chỉ hoạt động với display: inline-block; .

Xem ví dụ

Chúng tôi muốn tập trung vào nội dung chứ không phải chính div!

Bạn có hai lựa chọn. Nếu bạn chỉ có các phần tử div có văn bản thì bạn có thể sử dụng thuộc tính line-height. Điều này có nghĩa là bạn cần biết chiều cao của phần tử nhưng bạn không thể đặt nó. Bằng cách này, văn bản của bạn sẽ luôn ở giữa.

Sự thật về phương pháp này Căn chỉnh theo chiều dọc CSS có một nhược điểm. Nếu văn bản có nhiều dòng thì chiều cao của dòng sẽ được nhân với số dòng. Rất có thể, trong trường hợp này, bạn sẽ có một trang được bố cục quá tệ.

Hãy xem ví dụ này

Nếu nội dung bạn muốn căn giữa có nhiều hơn một dòng thì tốt hơn nên sử dụng div bảng. Bạn cũng có thể sử dụng bảng, nhưng điều này không đúng về mặt ngữ nghĩa. Nếu bạn cần nghỉ giải lao vì mục đích đáp ứng, tốt hơn nên sử dụng phần tử div.

Để tính năng này hoạt động, phải có một thùng chứa chính có display: table và bên trong nó có số cột mong muốn mà bạn muốn căn giữa sử dụng màn hình: ô bảng và căn chỉnh dọc: giữa .

Xem ví dụ

Tại sao tính năng này hoạt động với đánh dấu bảng mà không hoạt động với phần tử div? Vì các hàng trong bảng có cùng chiều cao. Khi nội dung của một ô trong bảng không sử dụng hết chiều cao có sẵn, trình duyệt sẽ tự động thêm khoảng đệm dọc để căn giữa nội dung.

thuộc tính vị trí

Hãy bắt đầu với những điều cơ bản về căn chỉnh Ngành dọc CSS div:

• vị trí: tĩnh là mặc định. Phần tử được hiển thị theo thứ tự HTML;
• vị trí: tuyệt đối - được sử dụng để xác định vị trí chính xác của một phần tử. Vị trí này luôn liên quan đến phần tử cha có vị trí tương đối gần nhất (không phải tĩnh). Nếu không xác định chính xác vị trí của một phần tử, bạn sẽ mất quyền kiểm soát nó. Nó sẽ xuất hiện ngẫu nhiên, hoàn toàn bỏ qua dòng chảy của tài liệu. Theo mặc định, phần tử xuất hiện ở góc trên bên trái;
• vị trí: tương đối - được sử dụng để định vị một phần tử liên quan đến nó vị trí bình thường(tĩnh). Giá trị này giữ nguyên thứ tự luồng tài liệu;
• vị trí: đã sửa - được sử dụng để định vị phần tử liên quan đến cửa sổ trình duyệt để nó luôn hiển thị trong chế độ xem.

Lưu ý: một số thuộc tính ( chỉ số hàng đầu và z) chỉ hoạt động nếu phần tử được đặt ở vị trí (không phải tĩnh).

Hãy bắt tay vào công việc!

Bạn có muốn thực hiện Căn chỉnh CSS căn giữa theo chiều dọc? Đầu tiên tạo một phần tử có vị trí và kích thước tương đối. Ví dụ: 100% về chiều rộng và chiều cao.

Bước thứ hai có thể khác nhau tùy thuộc vào trình duyệt mục tiêu, nhưng bạn có thể sử dụng một trong hai tùy chọn:

• Thuộc tính cũ: cần biết chính xác kích thước của cửa sổ để loại bỏ một nửa chiều rộng và một nửa chiều cao. Xem ví dụ;
• Mới Thuộc tính CSS 3 : Bạn có thể thêm thuộc tính biến đổi với giá trị dịch là 50% và khối sẽ luôn ở giữa. Xem ví dụ.

Về cơ bản, nếu bạn muốn tập trung vào nội dung, không bao giờ sử dụng hàng đầu: 40% hoặc trái: 300px . Tính năng này hoạt động tốt trên màn hình thử nghiệm nhưng không được căn giữa.

Ghi nhớ vị trí: cố định? Bạn có thể làm điều tương tự với nó như với vị trí tuyệt đối, nhưng bạn không cần vị trí tương đối cho phần tử cha- nó sẽ luôn được định vị so với cửa sổ trình duyệt.

Bạn đã nghe nói về đặc tả flexbox chưa?

Bạn có thể sử dụng flexbox. Điều này tốt hơn nhiều so với bất kỳ lựa chọn nào khác căn chỉnh văn bản thành trung tâm CSS theo chiều dọc. Với flexbox, việc quản lý các phần tử giống như trò chơi của trẻ con. Vấn đề là một số trình duyệt cần phải loại bỏ, chẳng hạn như IE9 và các phiên bản bên dưới. Dưới đây là ví dụ về cách căn giữa một khối theo chiều dọc:

Xem ví dụ

Bằng cách sử dụng bố cục flexbox, bạn có thể căn giữa nhiều khối.

Nếu bạn áp dụng những gì học được từ những ví dụ này, bạn có thể thành thạo Căn chỉnh khối dọc CSS sớm nhất có thể.

Liên kết và đọc thêm

Học đánh dấu CSS

Ếch FlexBox

Hộp cát Flexbox

Bản dịch của bài viết “ Căn chỉnh theo chiều dọc CSS cho mọi người (Bao gồm cả hình giả)” đã được chuẩn bị bởi nhóm dự án thân thiện.

Hôm nay bạn đọc thân mến, chúng ta sẽ giải quyết vấn đề căn chỉnh theo chiều dọc trong một khối div.

Rất có thể bạn đã biết về sự tồn tại của một thuộc tính CSS tuyệt vời căn chỉnh theo chiều dọc. Và chính Chúa đã ra lệnh cho chúng ta sử dụng chính xác đặc tính này để căn chỉnh theo chiều dọc (không phải vô cớ mà nó có một cái tên tự giải thích như vậy).

Xây dựng bài toán: Bạn cần căn giữa nội dung của khối có chiều cao thay đổi so với chiều dọc.

Bây giờ chúng ta hãy bắt đầu giải quyết vấn đề.

Và như vậy, chúng ta có một khối, chiều cao của nó có thể thay đổi:

Điều đầu tiên bạn nghĩ đến là thực hiện động tác giả sau:

Có mọi lý do để tin rằng cụm từ Chặn nội dung sẽ được căn chỉnh theo chiều cao trung tâm của vùng chứa div.

Nhưng nó không có ở đó! Chúng tôi sẽ không đạt được bất kỳ sự liên kết trung tâm như mong đợi nào theo cách này. Và tại sao? Có vẻ như mọi thứ đều được chỉ định chính xác. Hóa ra đây chính là sự chà xát: tài sản căn chỉnh theo chiều dọc chỉ có thể được sử dụng để căn chỉnh nội dung của các ô trong bảng hoặc để căn chỉnh các phần tử nội tuyến tương đối với nhau.

Về căn chỉnh bên trong ô bảng, tôi nghĩ mọi thứ đều rõ ràng. Nhưng tôi sẽ giải thích một trường hợp khác với các phần tử nội tuyến.

Căn chỉnh theo chiều dọc của các phần tử nội tuyến

Giả sử bạn có một dòng văn bản được chia nhỏ bằng thẻ dòng thành các phần:

Bạn chào mừng cái chữ!

Dưới thẻ chữ thườngđược hiểu là một vật chứa, bề ngoài của nó không dẫn đến việc chuyển nội dung sang dòng mới.

Hành động của thẻ khối làm cho nội dung của vùng chứa được chuyển sang một dòng mới.

- Cái này thẻ chặn. Nếu chúng ta gói các đoạn văn bản thành các khối

, sau đó mỗi người trong số họ sẽ ở trên một dòng mới. Sử dụng thẻ , mà, không giống như

, là chữ thường, các container sẽ không được chuyển sang dòng mới, tất cả các container sẽ vẫn ở trên cùng một dòng.

Thùng đựng hàng thuận tiện sử dụng khi chỉ định một phần của văn bản định dạng đặc biệt(đánh dấu bằng màu sắc, phông chữ khác nhau, v.v.)

Đối với container Áp dụng các thuộc tính CSS sau:

#perviy( Vertical-align:sub; ) #vtoroy( Vertical-align:3px; ) #tretiy( Vertical-align:-3px; )

Dòng văn bản kết quả sẽ trông như thế này:

Đây không gì khác hơn là căn chỉnh theo chiều dọc của các phần tử nội tuyến và thuộc tính CSS căn chỉnh theo chiều dọcđối phó với nhiệm vụ này một cách hoàn hảo.

Chúng ta hơi phân tâm một chút, bây giờ chúng ta quay lại nhiệm vụ chính của mình.

Căn chỉnh dọc trong vùng chứa div

Dù thế nào đi nữa, để căn chỉnh trong vùng chứa div, chúng ta sẽ sử dụng thuộc tính căn chỉnh theo chiều dọc. Như tôi đã nói, tài sản này có thể được sử dụng trong trường hợp căn chỉnh các phần tử nội tuyến (chúng tôi đã thảo luận chi tiết về trường hợp này ở trên và nó không phù hợp với chúng tôi để căn chỉnh trong vùng chứa div); tất cả những gì còn lại là sử dụng thực tế rằng căn chỉnh theo chiều dọc hoạt động cho các ô của bảng.

Làm thế nào chúng ta có thể sử dụng điều này? Chúng tôi không có bảng, chúng tôi làm việc với vùng chứa div.

Ha, hóa ra lại rất đơn giản.

Thuộc tính CSS trưng bày cho phép bạn biến khối div của chúng tôi thành một ô trong bảng, việc này có thể được thực hiện dễ dàng và tự nhiên:

Giả sử chúng ta có một lớp div căn chỉnh văn bản:

Đối với khối này, chúng tôi chỉ định thuộc tính CSS sau:

Textalign(hiển thị: ô bảng; )

Hướng dẫn CSS này sẽ biến div của chúng ta thành một ô bảng một cách thần kỳ mà không cần thay đổi trực quan nó theo bất kỳ cách nào. Và đối với một ô trong bảng, chúng ta có thể áp dụng thuộc tính căn chỉnh theo chiều dọcđầy đủ và căn chỉnh theo chiều dọc mong muốn sẽ hoạt động.

Tuy nhiên, mọi chuyện không thể kết thúc đơn giản như vậy. Chúng tôi có một trình duyệt IE tuyệt vời. Anh ta không biết cách làm việc với tài sản hiển thị: ô bảng(Tôi khuyên bạn nên đọc bảng minh họa chức năng của thuộc tính CSS này trong các trình duyệt khác nhau trên trang web htmlbook.ru). Vì vậy, chúng ta sẽ phải dùng đến nhiều thủ đoạn khác nhau.

Có nhiều cách để đạt được sự căn chỉnh trong vùng chứa div cho tất cả các trình duyệt:

• Phương pháp sử dụng vùng chứa div phụ trợ bổ sung
• Phương pháp sử dụng biểu thức. Nó được kết nối với một phép tính phức tạp về chiều cao khối. Không có Kiến thức về JavaScript không có cách nào xung quanh nó.
• Sử dụng thuộc tính chiều cao dòng. Phương pháp này chỉ thích hợp cho việc căn chỉnh theo chiều dọc trong một khối có chiều cao đã biết và do đó trong trường hợp chung không áp dụng được.
• Sử dụng offset nội dung tuyệt đối và tương đối trong trường hợp trình duyệt IE. Phương pháp này đối với tôi có vẻ dễ hiểu và đơn giản nhất. Ngoài ra, nó có thể triển khai được cho vùng chứa div có chiều cao thay đổi. Chúng tôi sẽ tập trung vào nó chi tiết hơn.

Như bạn đã hiểu, chúng ta chỉ cần giải quyết vấn đề căn chỉnh theo chiều dọc trong IE liên quan đến sự hiểu lầm về thuộc tính của nó hiển thị: ô bảng(không phải IE6, cũng không phải IE7, cũng không phải IE8 không quen thuộc với tính chất này). Vì vậy, sử dụng bình luận có điều kiện Chúng tôi sẽ chỉ định các thuộc tính CSS khác nhau dành riêng cho trình duyệt IE.

Bình luận có điều kiện

Loại công trình:

... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

được gọi là nhận xét có điều kiện (hãy cẩn thận, loại bình luận có điều kiện phải hoàn toàn tương ứng với ví dụ đã cho, tối đa một khoảng trắng).

Các hướng dẫn chứa trong nhận xét có điều kiện như vậy sẽ chỉ được thực thi nếu trình duyệt thông dịch mã này, thuộc họ IE.

Do đó, bằng cách sử dụng nhận xét có điều kiện, chúng ta có thể ẩn một đoạn mã khỏi tất cả các trình duyệt ngoại trừ IE.

Giải pháp của vấn đề

Vì tất cả mùi tây này, chúng tôi sẽ cần cung cấp mã HTML của mình với hai vùng chứa bổ sung. Khối văn bản của chúng ta sẽ trông như thế này:

Đối với lớp chứa div căn chỉnh văn bản Các thuộc tính CSS được thiết lập để căn chỉnh nội dung của nó theo chiều dọc cho mọi người trình duyệt bình thường(tất nhiên là ngoại trừ IE):

Hiển thị: ô bảng; căn dọc: giữa;

Và hai thuộc tính nữa đặt chiều rộng và chiều cao cho khối:

Chiều rộng: 500px; chiều cao: 500px;

Điều này là khá đủ để căn chỉnh nội dung của vùng chứa ở giữa theo chiều dọc, trong tất cả các trình duyệt ngoại trừ IE.

Bây giờ chúng ta bắt đầu thêm các thuộc tính liên quan đến căn chỉnh dành cho các trình duyệt thuộc họ IE(đối với họ chúng tôi đã sử dụng khối bổ sung div Và nhịp):

Đề cập đến thẻ div bên trong một khối lớp căn chỉnh văn bản. Để thực hiện việc này, trước tiên bạn cần chỉ ra tên của lớp, sau đó, cách nhau bằng dấu cách, thẻ mà chúng ta đang truy cập.

Căn chỉnh văn bản div(vị trí: tuyệt đối; trên cùng: 50%; )

Thiết kế này có nghĩa là: dành cho tất cả mọi người thẻ div bên trong một khối có một lớp căn chỉnh văn bảnáp dụng các thuộc tính được liệt kê.

Theo đó, các kiểu được chỉ định cho khối căn chỉnh văn bảnđược sửa đổi:

Textalign(hiển thị: ô bảng; căn chỉnh dọc: giữa; chiều rộng:500px; chiều cao: 500px; vị trí: tương đối; )

Bây giờ điểm trên cùng bên trái của khối văn bản được di chuyển xuống 50%.

Để giải thích điều gì đang xảy ra, tôi đã vẽ một minh họa:

Như bạn có thể thấy trong hình, chúng tôi đã đạt được một số tiến bộ. Nhưng đó không phải là tất cả! Điểm trên cùng bên trái của khối màu vàng thực sự đã di chuyển xuống 50% so với khối gốc (màu tím). Nhưng chúng ta cần nó ở độ cao bằng 50% chiều cao của khối màu tím. trung tâm của khối màu vàng, không phải điểm trên cùng bên trái của nó.

Bây giờ thẻ sẽ phát huy tác dụng nhịp và anh ta định vị tương đối:

Khoảng văn bản(vị trí: tương đối; trên cùng: -50%; )

Vì vậy, chúng ta đã dịch chuyển khối màu vàng lên 50% chiều cao của nó so với vị trí ban đầu. Như bạn hiểu, chiều cao của khối màu vàng bằng chiều cao của nội dung được căn giữa. Và thao tác cuối cùng trên span container đã đặt nội dung của chúng ta vào giữa khối màu tím. Hoan hô!

Hãy gian lận một chút

Trước hết, chúng ta cần ẩn mùi tây khỏi tất cả các trình duyệt thông thường và mở nó cho IE. Tất nhiên, điều này có thể được thực hiện bằng cách sử dụng nhận xét có điều kiện;

Có một vấn đề nhỏ. Nếu nội dung được căn giữa quá cao thì điều này sẽ dẫn đến hậu quả khó chịu: có thêm chiều cao cho cuộn dọc.

Giải pháp cho vấn đề: cần thêm thuộc tính tràn: ẩn khối textalign.

Tìm hiểu chi tiết về tài sản tràn ra có thể trong .

Hướng dẫn CSS cuối cùng cho khối căn chỉnh văn bản có dạng:

Textalign(hiển thị: ô bảng; căn chỉnh dọc: giữa; chiều rộng: 500px; chiều cao: 500px; vị trí: tương đối; tràn: ẩn; đường viền: 1px màu đen đậm; )

Tôi xin lỗi, tôi quên đề cập đến một điểm quan trọng. Nếu bạn cố gắng thiết lập chiều cao của khối lớp căn chỉnh văn bản như một phần trăm, Sau đó bạn có sẽ không có gì hiệu quả.

Căn giữa khối có chiều cao thay đổi

Rất thường xuyên có nhu cầu đặt chiều cao của khối lớp căn chỉnh văn bản không phải bằng pixel mà là phần trăm chiều cao của khối cha và căn chỉnh nội dung của vùng chứa div ở giữa.

Điều đáng chú ý là không thể thực hiện điều này đối với một ô trong bảng (nhưng khối lớp căn chỉnh văn bản biến chính xác thành một ô bảng, nhờ thuộc tính hiển thị:ô bảng).

Trong trường hợp này, bạn phải sử dụng một khối bên ngoài có thuộc tính CSS được chỉ định hiển thị: bảng và đã đặt giá trị phần trăm của chiều cao cho nó. Sau đó, khối được lồng trong đó với lệnh CSS hiển thị:ô bảng, sẽ vui vẻ kế thừa chiều cao của khối cha.

Để triển khai khối có chiều cao thay đổi trong ví dụ của chúng tôi, chúng tôi sẽ chỉnh sửa CSS một chút:

Đến lớp căn chỉnh văn bản chúng tôi sẽ thay đổi giá trị tài sản trưng bày Với ô bảng TRÊN bàn và loại bỏ chỉ thị căn chỉnh căn dọc: giữa. Bây giờ chúng ta có thể thay đổi giá trị chiều cao từ 500 pixel thành 100% một cách an toàn.

Vì vậy các thuộc tính CSS cho khối lớp căn chỉnh văn bản sẽ trông như thế này:

Textalign( display: bảng; chiều rộng: 500px; chiều cao: 100%; vị trí: tương đối; tràn: ẩn; đường viền: 1px màu đen đặc; )

Tất cả những gì còn lại là triển khai việc tập trung vào nội dung. Để làm điều này, một thùng chứa div được lồng trong một khối lớp căn chỉnh văn bản(đây là khối màu vàng giống như trong hình), bạn cần đặt thuộc tính CSS hiển thị:ô bảng, thì nó sẽ kế thừa chiều cao 100% từ khối cha căn chỉnh văn bản(khối màu tím). Và không có gì ngăn cản chúng ta căn chỉnh nội dung của vùng chứa div lồng nhau ở giữa với thuộc tính căn dọc: giữa.

Chúng tôi nhận được một cái khác danh sách bổ sung Thuộc tính CSS cho khối div lồng trong một thùng chứa căn chỉnh văn bản.

Textalign div( display: table-cell; Vertical-align: middle; )

Đó là toàn bộ thủ thuật. Nếu muốn, bạn có thể có chiều cao thay đổi với nội dung được căn giữa.

Để biết thêm thông tin về căn chỉnh theo chiều dọc của khối có chiều cao thay đổi, hãy xem .

Nếu bạn đã từng thử thì sẽ thấy khó, đặc biệt nếu bạn muốn tránh sử dụng bảng. May mắn thay, tiếng kêu cứu của chúng tôi đã được lắng nghe và một trong những vũ khí mới được thêm vào kho vũ khí CSS để giải quyết vấn đề này là một kiểu bố cục được gọi là bố cục hộp linh hoạt. Như bạn sẽ tìm hiểu sau đây, nó cung cấp cho bạn một số tính năng thực sự tuyệt vời để đơn giản hóa các bố cục phức tạp. Một số chức năng tuyệt vời này cũng cho phép bạn căn giữa nội dung của mình theo chiều dọc và chiều ngang và đó là những gì chúng tôi sẽ đề cập trong hướng dẫn này. Bạn có thể thực hiện việc này bằng phần đệm ở một mức độ nào đó, nhưng nó có thể đưa bố cục của bạn đến các màn hình nhỏ hơn. Việc thêm một lớp CSS tùy chỉnh vào biểu định kiểu của bạn có nghĩa là bạn có thể căn giữa bất kỳ nội dung nào theo chiều dọc trong vài giây.

Căn chỉnh theo chiều ngang xác định cách các cạnh trái và phải của đoạn văn khớp với các cạnh trái và phải trương Văn bản. Căn chỉnh dọc xác định vị trí dọc của ký tự trong trường văn bản. Vắng mặt những cách tốt định tâm dọc các phần tử trong CSS là một lỗ hổng đen tối trong danh tiếng của nó trong hầu hết thời gian tồn tại của nó.

Phương pháp đầu tiên với chiều cao dòng

Phương pháp đầu tiên đơn giản và hơi tầm thường, nhưng nó có những nhược điểm sẽ hạn chế việc sử dụng nó. Khi mã hóa các trang html cho một trang web khoảng cách dòng nội dung văn bản có lẽ là một trong những thuộc tính thường được để mặc định. Nói chung, chúng ta cần đặt chiều cao của chính dòng đó, có chiều cao tương tự cho khối nơi nó được sử dụng chiều cao giữa các dòng tài sản.

Constutesim_first(
đường viền: 2px liền khối #bf1515;
chiều cao: 175px;
}
.constutesim_first > p(
chiều cao dòng: 175px;
lề:0;
căn chỉnh văn bản:giữa;
phần đệm: 0;
cỡ chữ: 17px;
màu sắc: #3152a0;
Họ phông chữ: Tahoma;
độ dày phông chữ: đậm;
}

Sử dụng một phương pháp tương tự, có thể nhận ra cách định vị hình ảnh, hình ảnh sẽ ở giữa và chắc chắn là theo chiều dọc. Ở đây tất cả những gì còn lại là chỉ định một thuộc tính: Vertical-align: middle; chịu trách nhiệm hiển thị hình ảnh.

Biến thể thứ hai (
đường viền: 2px màu đỏ đậm;
chiều cao dòng: 158px;
}

Div biến thể thứ hai(
căn chỉnh văn bản:giữa;
}
.img-biến thể thứ hai (
căn dọc: giữa;
đường viền: 0px liền khối #3a3838;
}

Căn chỉnh với thuộc tính vị trí

Đây có lẽ là nhất phương pháp đã biết, nhưng phổ biến nhất trong ứng dụng để sử dụng với sử dụng CSS. Nhưng ở đây chúng ta cần nói thêm rằng nó cũng không lý tưởng và phương pháp này cũng có những sắc thái nhỏ riêng liên quan đến tâm của phần tử, nếu nó được chỉ định trong tỷ lệ phần trăm, thì việc định tâm sẽ trở thành bên trái phía trên cùng, bên trong blog.

Tùy chọn cạnh tranh (
đường viền: 2px liền khối #d40e0e;
chiều cao: 162px;
vị trí: tương đối;
}
.competaird-option div (
vị trí: tuyệt đối;
trên cùng: 50%;
trái: 50%;
chiều cao: 28%;
chiều rộng: 49%;
ký quỹ: -2% 0 0 -25%;
đường viền: 2px liền khối #4a4848;
}

Căn chỉnh với thuộc tính bảng

Trong phương pháp này, chúng tôi sử dụng đã được chứng minh và phương pháp cũ, trong đó chúng tôi chuyển đổi các phần tử thành một bảng chứa các ô. Còn thẻ có tên table sẽ không được sử dụng ở đây; ở đây chúng ta sẽ đặt các thuộc tính CSS hoàn toàn khác, đây là display: table;, display: table-cell;. Nếu chúng ta nói về các phiên bản IE cũ nhất, thì dữ liệu sẽ không được hiển thị ở đây. Tôi hy vọng bạn đã cập nhật trình duyệt của mình vì nó không còn phù hợp nữa và hiển thị hầu hết mọi thứ không chính xác.

Biến thể Cherevert (
đường viền: 2px liền khối #c30b0b;
chiều cao: 173px;
hiển thị: bảng;
chiều rộng: 100%;
cỡ chữ: 17px;
độ dày phông chữ: đậm;
màu: #3945a0;
}

Cherevert-biến div(
hiển thị: ô bảng;
căn dọc: giữa;
căn chỉnh văn bản:giữa;
}

Căn chỉnh với thuộc tính flex

Ở đây chúng ta đến với nhiều hơn phiên bản gốc, có các thuộc tính riêng hiếm khi được tìm thấy trong cách bố trí tài nguyên Internet. Nhưng chúng vẫn được sử dụng và trong một số trường hợp chúng vẫn hữu ích. Điều này đặt trục chính để định nghĩa mục flex hướng được đặt trong vùng chứa đĩa mềm.

Biến thể ngang (
đường viền: 2px liền khối #d20c0c;
chiều cao: 147px;
hiển thị: linh hoạt;
căn chỉnh các mục: giữa;
biện minh-nội dung: trung tâm;
cỡ chữ: 18px;
độ dày phông chữ: đậm;
màu sắc: #49518c;
}

Căn chỉnh với thuộc tính biến đổi

Và bây giờ chúng ta đã đến với phương pháp cực đoan nhất, nhưng chưa phải là ứng dụng mới nhất trong việc sử dụng thiết kế web của nó. Mọi thứ ở đây đều đơn giản, bạn cần di chuyển nó theo chiều dọc phần tử đã chođến giá trị bạn cần. Tài sản biến đổi, đây là danh sách các phép biến đổi mà trình cài đặt áp dụng khi cài đặt gói. Trình cài đặt áp dụng các phép biến đổi theo thứ tự giống như chúng được chỉ định trong thuộc tính.

Dọc-medilpasudsa (
đường viền: 2px liền khối #e00a0a;
chiều cao: 158px;
cỡ chữ: 19px;
độ dày phông chữ: đậm;
màu: #353c71;
}
.vertical-medilpasudsa > div(
vị trí: tương đối;
trên cùng: 50%;
biến đổi: dịchY(-50%);
căn chỉnh văn bản:giữa;
}

Nếu bạn muốn căn giữa các ký tự theo chiều ngang trong một phần tử, bạn nên sử dụng text-align: center. Một tùy chọn nếu bạn muốn căn giữa nó theo chiều dọc và bạn có phần trên cố định chân trang và một hàng văn bản, đặt chiều cao của dòng bằng với chiều cao của chân trang.

Nếu bạn cần căn giữa văn bản trong một phần tử như div, tiêu đề hoặc đoạn văn, bạn có thể sử dụng thuộc tính CSS căn chỉnh văn bản.

Căn chỉnh văn bản có một số thuộc tính hợp lệ:

Trung tâm: Kết cấu được căn giữa;
bên trái: Sẽ được căn chỉnh về phía bên trái của vùng chứa;
Phải: Căn chỉnh về phía bên phải của container
biện minh: Buộc phải căn chỉnh với cả hai cạnh trái và phải của container, ngoại trừ các đường ngoài cùng;
biện minh-tất cả: Làm cho đường cực đoan biện minh cho các dấu hiệu;
bắt đầu: Tương tự như bên trái, chỉ khi hướng đi từ trái sang bên phải. Nhưng sẽ đúng nếu ban đầu bạn đặt hướng văn bản, điều này sẽ xảy ra từ phải sang trái;
Kết thúc: Ngược lại với sự khởi đầu;
cha mẹ phù hợp: Tương tự như kế thừa, ngoại trừ phần bắt đầu và kết thúc, nó được tính tương ứng với phần tử cha;

Sử dụng các thuộc tính này để căn chỉnh văn bản trong div cha hoặc div trình bao bọc. Nếu bạn muốn căn giữa văn bản theo chiều ngang trong một phần tử, bạn nên sử dụng text-align: center.

Một tùy chọn là nếu bạn muốn căn giữa nó theo chiều dọc, nếu bạn có chân trang đầu trang cố định và một hàng văn bản, hãy đặt chiều cao của dòng bằng với chiều cao của chân trang.

Việc căn chỉnh các phần tử theo chiều ngang và chiều dọc có thể được thực hiện theo nhiều cách khác nhau. Việc lựa chọn phương pháp phụ thuộc vào loại phần tử (khối hoặc nội tuyến), loại vị trí, kích thước, v.v.

1. Căn chỉnh theo chiều ngang vào giữa khối/trang

1.1. Nếu chiều rộng khối được chỉ định:

Nếu bạn cần lên cấp phần tử nội tuyến theo cách này, nó cần được đặt thành display: block;

1.2. Nếu một khối được lồng trong một khối khác và chiều rộng của nó không được chỉ định/chỉ định:

1.3. Nếu khối có chiều rộng và cần được căn giữa vào khối cha của nó:

1.4. Nếu các khối không có chiều rộng được chỉ định, bạn có thể căn giữa chúng bằng cách sử dụng khối bao bọc chính:

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

2.1. Ví dụ: nếu văn bản chiếm một dòng đối với các nút và mục menu:

2.2. Để căn chỉnh theo chiều dọc một khối trong khối cha:

2.3. Căn chỉnh theo chiều dọc theo loại bảng:

2.4. Nếu một khối có chiều rộng và chiều cao nhất định và cần được căn giữa vào khối cha của nó:

2.5. Định vị tuyệt đối ở giữa trang/khối bằng cách sử dụng phép chuyển đổi CSS3:

nếu kích thước được chỉ định cho phần tử

nếu phần tử không có thứ nguyên và không trống

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 làm 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ị tài sản phải bằng chiều cao 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 nên tạo các phần tử bảng sử dụ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

Căn chỉnh chữ thường và phần tử khối nội tuyến, bao gồm cả hình ảnh và biểu tượng, trong văn bản xung quanh chúng được thực hiện thuộc tính căn chỉnh theo chiều 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 theo chiều dọc: giữa và chuyển đổi thành loại khối nội tuyến - hiển thị: khối nội tuyến.

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ị TranslateY: -50%, nâng phần tử lên một nửa chiều cao của chính nó và từ đó căn chỉnh trung tâm dọ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ì cha mẹ và con cái có cùng chiều cao, phần tử bên trong, được căn chỉnh theo chiều dọc với phần tử giả, cũng được căn giữa với khối 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;
}

Phương pháp phổ quát. Không hoạt động nếu đơn vị trong nhàđược cho định vị 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 cấp 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ó.