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

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ữ!

Thẻ nội tuyến là một thùng chứa có hình thức không làm cho nội dung được chuyển sang một dòng mới.

Hoạt độ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.

là thẻ khối. 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 văn bản có định dạng đặc biệt (đánh dấu nó bằng màu sắc, phông chữ khác, 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, thuộc tính 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 ta đã 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 ta để 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. Bạn không thể làm điều này nếu không có kiến ​​thức về JavaScript.
• 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 đó không áp dụng được trong trường hợp chung.
• 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 dành riêng cho các trình duyệt thuộc họ 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 nhận xét 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 có 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 diễn giải 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 đặt để căn chỉnh nội dung của nó theo chiều dọc cho tất cả các trình duyệt thông thường (tất nhiên 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 các 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à: cho tất cả các 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à vị trí tương đối của nó:

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

Do đó, 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 chơi trò lừa 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( display: table-cell; Vertical-align: middle; width:500px; Height: 500px; vị trí: tương đối; tràn: ẩn; 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 danh sách bổ sung các thuộc tính CSS khác cho khối div được lồng trong vù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 .

Nhiệm vụ rất thường xuyên là căn chỉnh một khối ở giữa trang / màn hình và thậm chí sao cho không có tập lệnh Java, không đặt kích thước cố định hoặc thụt lề âm và để thanh cuộn hoạt động cho phần gốc nếu khối vượt quá kích thước của nó . Có khá nhiều ví dụ đơn điệu trên Internet về cách căn chỉnh một khối vào giữa màn hình. Theo quy định, hầu hết chúng đều dựa trên các nguyên tắc giống nhau.

Dưới đây là những cách chính để giải quyết vấn đề, ưu và nhược điểm của chúng. Để hiểu bản chất của các ví dụ, tôi khuyên bạn nên giảm chiều cao/chiều rộng của cửa sổ Kết quả trong các ví dụ tại các liên kết được cung cấp.

Tùy chọn 1: Thụt lề âm.

Định vị khối sử dụng 50% thuộc tính trên cùng và bên trái, đồng thời biết trước chiều cao và chiều rộng của khối, đặt lề âm, bằng một nửa kích thước khối. Một nhược điểm rất lớn của tùy chọn này là bạn cần đếm số lần thụt lề âm. Cũng khối không hoạt động hoàn toàn chính xác khi được bao quanh bởi các thanh cuộn - nó chỉ đơn giản là bị cắt đi vì nó có lề âm.

Cha mẹ ( chiều rộng: 100%; chiều cao: 100%; vị trí: tuyệt đối; trên cùng: 0; trái: 0; tràn: tự động; ) .block ( chiều rộng: 250px; chiều cao: 250px; vị trí: tuyệt đối; trên cùng: 50%; trái : 50%; lề: -125px 0 0 -125px; img (độ rộng tối đa: 100%; chiều cao: tự động; hiển thị: khối; lề: 0 tự động; đường viền: không; )

Tùy chọn 2. Thụt lề tự động.

Ít phổ biến hơn, nhưng tương tự như lần đầu tiên. Vì khối chúng tôi đặt chiều rộng và chiều cao, định vị các thuộc tính trên cùng bên phải dưới cùng bên trái thành 0 và đặt lề tự động. Ưu điểm của tùy chọn này là thanh cuộn hoạt động cha mẹ, nếu cái sau có chiều rộng và chiều cao 100%. Nhược điểm của phương pháp này là việc thiết lập kích thước cứng nhắc.

Cha mẹ ( chiều rộng: 100%; chiều cao: 100%; vị trí: tuyệt đối; trên cùng: 0; trái: 0; tràn: tự động; ) .block ( chiều rộng: 250px; chiều cao: 250px; vị trí: tuyệt đối; trên cùng: 0; phải: 0; dưới cùng: 0; bên trái: 0; lề: tự động; img (độ rộng tối đa: 100%; chiều cao: tự động; hiển thị: khối; lề: 0 tự động; đường viền: không có; )

Tùy chọn 3. Bảng.

Thử hỏi xem sao cha mẹ kiểu bảng, ô cha mẹĐặt căn chỉnh văn bản ở giữa. MỘT khối chúng tôi thiết lập mô hình khối dòng. Nhược điểm mà chúng tôi gặp phải là thanh cuộn không hoạt động và nhìn chung tính thẩm mỹ khi “mô phỏng” bảng cũng không.

Cha mẹ ( chiều rộng: 100%; chiều cao: 100%; hiển thị: bảng; vị trí: tuyệt đối; trên cùng: 0; trái: 0; > .inner ( hiển thị: ô bảng; căn chỉnh văn bản: giữa; căn chỉnh dọc: giữa; ) ) .block ( display: inline-block; img ( display: block; border: none; ) )

Để thêm cuộn vào ví dụ này, bạn sẽ phải thêm một yếu tố nữa vào thiết kế.
Ví dụ: jsfiddle.net/serdidg/fk5nqh52/3.

Tùy chọn 4. Phần tử giả.

Tùy chọn này không có tất cả các vấn đề được liệt kê trong các phương pháp trước đó và cũng giải quyết được các vấn đề ban đầu. Vấn đề là cha mẹ thiết lập phong cách phần tử giả trước đây, cụ thể là mô hình chiều cao 100%, căn giữa và khối nội tuyến. Nó cũng tương tự với khối một mô hình khối dòng được đặt, căn giữa. ĐẾN khối không "rơi" vào phần tử giả, khi kích thước của cái thứ nhất lớn hơn cha mẹ, biểu thị cha mẹ khoảng trắng: nowrap và cỡ chữ: 0, sau đó khối hủy các kiểu này bằng cách sau - khoảng trắng: bình thường. Trong ví dụ này, cần có font-size: 0 để xóa khoảng trắng kết quả giữa cha mẹ Và khối do định dạng mã. Khoảng trống có thể được loại bỏ theo những cách khác, nhưng tốt nhất bạn nên tránh nó.

Cha mẹ ( chiều rộng: 100%; chiều cao: 100%; vị trí: tuyệt đối; trên cùng: 0; trái: 0; tràn: tự động; khoảng trắng: nowrap; căn chỉnh văn bản: giữa; cỡ chữ: 0; &: trước ( chiều cao: 100%; hiển thị: khối nội tuyến; căn chỉnh dọc: giữa; nội dung: "";

Hoặc, nếu bạn cần cha mẹ chỉ chiếm chiều cao và chiều rộng của cửa sổ chứ không phải toàn bộ trang:

Cha mẹ ( vị trí: cố định; trên cùng: 0; phải: 0; dưới cùng: 0; trái: 0; tràn: tự động; khoảng trắng: nowrap; căn chỉnh văn bản: giữa; cỡ chữ: 0; &: trước ( chiều cao: 100%; hiển thị: khối nội tuyến; căn chỉnh dọc: giữa; nội dung: "";

Tùy chọn 5. Flexbox.

Một trong những cách đơn giản và tinh tế nhất là sử dụng flexbox. Nó không yêu cầu những chuyển động cơ thể không cần thiết, mô tả khá rõ ràng bản chất của những gì đang xảy ra và có tính linh hoạt cao. Điều duy nhất cần nhớ khi chọn phương pháp này là hỗ trợ IE từ phiên bản 10. caniuse.com/#feat=flexbox

Cha mẹ ( chiều rộng: 100%; chiều cao: 100%; vị trí: cố định; trên cùng: 0; trái: 0; hiển thị: flex; căn chỉnh các mục: giữa; căn chỉnh nội dung: giữa; biện minh-nội dung: giữa; tràn: tự động; ) .block ( nền: #60a839; img ( display: block; border: none; ) )

Tùy chọn 6. Chuyển đổi.

Phù hợp nếu chúng ta bị giới hạn bởi cấu trúc và không có cách nào để thao tác với phần tử gốc nhưng khối cần được căn chỉnh bằng cách nào đó. Hàm css dịch() sẽ ra tay giải cứu. Giá trị định vị tuyệt đối 50% sẽ định vị chính xác góc trên cùng bên trái của khối ở giữa, sau đó giá trị dịch âm sẽ di chuyển khối so với kích thước của chính nó. Xin lưu ý rằng các hiệu ứng tiêu cực có thể xuất hiện dưới dạng các cạnh mờ hoặc kiểu phông chữ. Ngoài ra, phương pháp này có thể dẫn đến các vấn đề khi tính toán vị trí của khối bằng java-script. Đôi khi, để bù cho việc mất 50% chiều rộng do sử dụng thuộc tính CSS left, quy tắc được chỉ định cho khối có thể. trợ giúp: lề phải: -50%;

Cha mẹ ( chiều rộng: 100%; chiều cao: 100%; vị trí: cố định; trên cùng: 0; trái: 0; tràn: tự động; ) .block ( vị trí: tuyệt đối; trên cùng: 50%; trái: 50%; biến đổi: dịch( -50%, -50%); img (hiển thị: chặn; ) )

Tùy chọn 7. Nút.

Tùy chọn azproduction của người dùng ở đâu khốiđóng khung trong một thẻ nút. Nút này có đặc tính căn giữa mọi thứ bên trong nó, cụ thể là các phần tử của mô hình nội tuyến và mô hình khối (khối nội tuyến). Trong thực tế tôi không khuyên bạn nên sử dụng nó.

Cha mẹ ( chiều rộng: 100%; chiều cao: 100%; vị trí: tuyệt đối; trên cùng: 0; trái: 0; tràn: tự động; nền: không; viền: không có; phác thảo: không có;) .block ( hiển thị: khối nội tuyến; img (hiển thị: khối;; đường viền: không có; ) )

Thưởng

Sử dụng ý tưởng của tùy chọn thứ 4, bạn có thể đặt lề ngoài cho khối và cái sau sẽ được hiển thị đầy đủ được bao quanh bởi các thanh cuộn.
Ví dụ: jsfiddle.net/serdidg/nfqg9rza/2.

Bạn cũng có thể căn chỉnh hình ảnh vào giữa và nếu hình ảnh lớn hơn cha mẹ, chia tỷ lệ theo kích thước cha mẹ.
Ví dụ: jsfiddle.net/serdidg/nfqg9rza/3.
Ví dụ với một bức tranh lớn:

Xin chào! Chúng tôi tiếp tục nắm vững những điều cơ bản của ngôn ngữ HTML. Hãy xem bạn cần viết những gì để căn chỉnh văn bản về giữa, chiều rộng hoặc các cạnh.

Bắt tay vào công việc, chúng ta hãy xem cách căn giữa văn bản trong HTML theo ba cách khác nhau. Hai cái cuối cùng được liên kết trực tiếp với biểu định kiểu. Nó có thể là một tệp CSS kết nối với các trang của trang web và xác định giao diện của chúng.

Phương pháp 1 - làm việc trực tiếp với HTML

Nó thực sự khá đơn giản. Xem ví dụ dưới đây.

Căn chỉnh đoạn văn vào giữa.

Nếu bạn cần di chuyển các đoạn văn bản theo một cách khác, thì thay vì tham số “center”, hãy nhập các giá trị sau:

• biện minh – căn chỉnh văn bản theo chiều rộng của trang;
• phải – ở cạnh phải;
• trái - bên trái.

Bằng cách tương tự, bạn có thể di chuyển nội dung trong tiêu đề (h1, h2) và vùng chứa (div).

Phương pháp 2 và 3 - sử dụng kiểu

Thiết kế được trình bày ở trên có thể được biến đổi một chút. Hiệu quả sẽ giống nhau. Để làm điều này, bạn cần phải viết mã dưới đây.

Khối văn bản.

Ở dạng này, mã được viết trực tiếp vào HTML để căn giữa nội dung văn bản.

Có một cách khác để đạt được kết quả. Bạn sẽ cần phải thực hiện một vài bước.

Bước 1. Trong mã chính viết

Tài liệu văn bản.

Bước 2. Trong tệp CSS đi kèm, nhập mã sau:

Rovno (căn chỉnh văn bản: center;)

Tôi lưu ý rằng từ “rovno” chỉ là tên của một lớp có thể được gọi khác nhau. Điều này được để lại theo quyết định của người lập trình.

Bằng cách tương tự, trong HTML, bạn có thể dễ dàng đặt văn bản ở giữa, căn đều và căn chỉnh sang cạnh phải hoặc trái của trang. Như bạn có thể thấy, có nhiều lựa chọn để đạt được mục tiêu của mình.

Chỉ cần một vài câu hỏi:

• Bạn đang thực hiện một dự án thông tin phi lợi nhuận?
• Bạn có muốn trang web của mình được xếp hạng tốt trên các công cụ tìm kiếm?
• Bạn có muốn kiếm thu nhập trực tuyến?

Nếu tất cả các câu trả lời đều tích cực thì chỉ cần xem xét cách tiếp cận tích hợp để phát triển trang web. Thông tin sẽ đặc biệt hữu ích nếu nó chạy trên WordPress CMS.

Tôi muốn chỉ ra rằng trang web của riêng bạn chỉ là một trong nhiều lựa chọn để tạo thu nhập thụ động hoặc chủ động trên Internet. Blog của tôi dành riêng cho các cơ hội tài chính trực tuyến.

Bạn đã từng làm việc trong lĩnh vực buôn bán chênh lệch lưu lượng truy cập, viết quảng cáo hoặc các lĩnh vực hoạt động khác tạo ra thu nhập chính hoặc bổ sung thông qua cộng tác từ xa chưa? Bạn có thể tìm hiểu về điều này và nhiều hơn nữa ngay bây giờ trên các trang blog của tôi.

Tôi sẽ công bố nhiều thông tin thực sự hữu ích trong tương lai. Giữ liên lạc. Nếu muốn, bạn có thể đăng ký nhận thông tin cập nhật Workip qua e-mail. Mẫu đăng ký nằm ở bên dưới.

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 giống như một 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ó div văn bản, bạn có thể sử dụng thuộc tính chiều cao dòng. Đ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 vù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 bằng cách sử dụng display: table-cell và Vertical-align: middle .

Xem ví dụ

Tại sao điều này hoạt động với đánh dấu bảng nhưng không hoạt động với các phần tử div? Vì các hàng trong bảng có cùng chiều cao. Khi nội dung ô 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 phần đệ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 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ử so với vị trí bình thường của nó (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 trung tâm theo chiều dọc CSS? Đầ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ụ;
• Thuộc tính CSS3 mới: 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ử gốc - nó sẽ luôn được định vị tương đối 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 ở giữa 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à bạn cần loại bỏ một số trình duyệt 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.

Khi bố cục một trang, thường phải thực hiện căn chỉnh giữa bằng phương pháp CSS: 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 giữa văn bản

Thông thường, vì mục đích trang trí, cần đặt văn bả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 này yêu cầu căn chỉnh văn bản bằng cách sử dụ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 đặt div ở giữa, CSS có thể cung cấp một cách khá thuận tiện: sử dụng 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. Với mục đích này, có một thuộc tính float, 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

Đôi khi việc căn chỉnh tâm bằng các phương pháp CSS là không đủ, bạn cũng cần thay đổi vị trí dọc của khối con. Bất kỳ phần tử 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; để làm đ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 trường hợp này, khối bên trong là 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 lề dưới - .child(vertical-align:bottom);

Cả căn chỉnh văn bản và căn chỉnh dọc đều không ảnh hưởng đến các phần tử khối.

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. Phần tử có lớp thứ hai được căn trái và khối cuối cùng được că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à chứa.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. Thuộc tính lề, được đặt thành thụt lề âm, sẽ giúp giải quyết vấn đề này. Có các phương pháp khác được sử dụng ít thường xuyên hơn: ví dụ: zeroing. Trong trường hợp này, font-size: 0 được ghi trong thuộc tính của phần tử gốc. Nếu có văn bản bên trong các khối thì kích thước phông chữ được yêu cầu đã được trả về trong thuộc tính của các phần tử khối nội tuyến. 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.

Các khối căn chỉnh cho phép bạn tạo các trang đẹp và tiện dụng: điều này bao gồm bố cục của bố cục tổng thể, sắp xếp sản phẩm trong các cửa hàng trực tuyến và ảnh trên trang web danh thiếp.