Thực đơn
trang chủTập tin và thư mục

Căn chỉnh theo chiều dọc trong div. CSS: Căn chỉnh văn bản theo chiều dọc. Căn chỉnh theo chiều dọc

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í không có tập lệnh Java, không có tác vụ kích thước cứng nhắc hoặc thụt lề âm để thanh cuộn cũng hoạt động cho phần tử mẹ 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 điểm trừ rất lớn tùy chọn này là bạn cần tính phần đệm â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 có; )

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 thiết lập chiều rộng và chiều cao, vị trí với các thuộc tính trên cùng ở dưới bên phải trái về 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 thiết lập, 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 trong ví dụ này cỡ chữ: 0 là cần thiết để 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 phần gốc 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 lựa chọn phương pháp này- hỗ trợ cho 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 đó. sẽ đến giải cứu chức năng css dịch() . 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 chúng có thể nổi tác động tiêu cựcở dạng mờ cạnh 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ị: khối; ) )

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ề Vì 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:

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 quyết định này, từ quan điểm ngữ nghĩa, bảng không được sử dụng cho mục đích đã đị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 thiết lập 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 như đơn vị trong nhà chỉ chiếm không quá một dòng văn bản, khi đó bạn có thể sử dụng thuộc tính line-height và đặt nó bằng chiều cao 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:

  • Ra lệnh cho thiết bị bên ngoài định vị tương đối vị trí: tương đối và phần bên trong là tuyệt đối vị trí: 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 chưa 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 đỉnh khối bên ngoài: 50% và nâng nó lên một nửa chiều cao của chính nó lề-top: -H bên trong / 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à nhiều nhất phương pháp phổ quá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 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 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 khi định vị tuyệt đốiđơn vị trong nhà.

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

Phương pháp căn chỉnh dọc hiện đại nhất là sử dụng Bố cục hộp linh hoạt (hoặc 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.

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ó 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.

Để làm được việc này phải có vùng chứa gốc với màn hình: bảng và bên trong nó - số lượng yêu cầu các cột 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ùng chiều cao. Khi nội dung của một ô trong bảng không sử dụng hết mọi thứ không gian có sẵn chiều cao, 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 thành giá trị vị trí(Không 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ụ;
  • 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 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à 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.

Tôi nghĩ nhiều người trong số các bạn từng làm việc với bố cục đã gặp phải nhu cầu căn chỉnh các phần tử theo chiều dọc và biết những khó khăn nảy sinh khi căn chỉnh một phần tử vào giữa.

Có, có một thuộc tính căn chỉnh theo chiều dọc đa giá trị đặc biệt trong CSS để căn chỉnh theo chiều dọc. Tuy nhiên, trên thực tế nó không hề hoạt động như mong đợi. Hãy thử tìm hiểu điều này.


Hãy so sánh các phương pháp sau. Căn chỉnh với:

  • những cái bàn,
  • thụt đầu dòng,
  • chiều cao giữa các dòng
  • kéo dài,
  • biên độ âm,
  • biến đổi
  • phần tử giả
  • flexbox.
Để minh họa, hãy xem xét ví dụ sau.

Có hai phần tử div, trong đó một phần tử được lồng vào phần tử kia. Hãy cung cấp cho họ các lớp tương ứng - bên ngoài và bên trong.


Thử thách là căn chỉnh phần tử bên trong với tâm của phần tử bên ngoài.

Đầu tiên, hãy xem xét trường hợp khi kích thước của khối bên ngoài và khối bên trong được biết đến. Hãy thêm quy tắc display: inline-block vào phần tử bên trong và text-align: center và Vertical-align: middle vào phần tử bên ngoài.

Hãy nhớ rằng căn chỉnh chỉ áp dụng cho các phần tử có chế độ hiển thị nội tuyến hoặc khối nội tuyến.

Hãy đặt kích thước của các khối, cũng như màu nềnđể xem ranh giới của họ.

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; ) .inner ( hiển thị: khối nội tuyến; chiều rộng: 100px; chiều cao: 100px; màu nền : #fcc;
Sau khi áp dụng các kiểu, chúng ta sẽ thấy khối bên trong được căn chỉnh theo chiều ngang chứ không phải theo chiều dọc:
http://jsfiddle.net/c1bgfffq/

Tại sao nó lại xảy ra? Vấn đề là thuộc tính căn chỉnh dọc ảnh hưởng đến việc căn chỉnh chính phần tử đó chứ không phải nội dung của nó(trừ khi nó được áp dụng cho các ô của bảng). Vì vậy, việc áp dụng tính chất này để yếu tố bên ngoàiđã không cho bất cứ điều gì. Hơn nữa, việc áp dụng thuộc tính này cho phần tử bên trong cũng sẽ không có tác dụng gì, vì khối dòng(khối nội tuyến) được căn chỉnh theo chiều dọc so với các khối liền kề và trong trường hợp của chúng tôi, chúng tôi có một khối nội tuyến.

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ọ.

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

Giải pháp đầu tiên bạn nghĩ đến là thay thế khối bên ngoài bằng một bảng gồm một ô. Trong trường hợp này, việc căn chỉnh sẽ được áp dụng cho nội dung của ô, tức là cho khối bên trong.


http://jsfiddle.net/c1bgfffq/1/

Nhược điểm rõ ràng của giải pháp này là, từ quan điểm ngữ nghĩa, việc sử dụng bảng để căn chỉnh là không chính xác. 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.

Điểm trừ đầu tiên có thể được loại bỏ một phần bằng cách thay thế thẻ table và td bằng div và thiết lập chế độ hiển thị bảng trong CSS.


.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Tuy nhiên, khối bên ngoài vẫn sẽ là một cái bàn với mọi hậu quả sau đó.

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

Nếu biết chiều cao của khối bên trong và bên ngoài, thì có thể đặt căn chỉnh bằng cách sử dụng thụt lề 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.

Bên ngoài ( chiều cao: 200px; ) . bên trong ( chiều cao: 100px; lề: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

Nhược điểm của giải pháp này là chỉ áp dụng được trong số lượng giới hạn trường hợp khi biết chiều cao của cả hai khối.

Căn chỉnh bằng chiều cao dòng

Nếu bạn biết rằng khối bên trong không được chiếm nhiều hơn 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.

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; )
http://jsfiddle.net/c1bgfffq/12/

Cũng kỹ thuật này cũng có thể được sử dụng để căn chỉnh văn bản nhiều dòng nếu bạn ghi đè giá trị chiều cao dòng cho khối bên trong và cũng thêm các quy tắc display: inline-block và Vertical-align: middle.

Bên ngoài ( chiều cao: 200px; chiều cao dòng: 200px; ) .inner ( 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; )
http://jsfiddle.net/c1bgfffq/15/

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.

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ưa 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.

Để làm điều này bạn cần:

  1. đặt vị trí tương đối cho khối bên ngoài và định vị tuyệt đối cho khối bên trong;
  2. thêm các 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;
  3. đặt phần đệm dọc của khối bên trong thành tự động.
.outer ( vị trí: tương đối; ) .inner ( chiều cao: 100px; vị trí: tuyệt đối; trên cùng: 0; dưới cùng: 0; lề: tự động 0; )
http://jsfiddle.net/c1bgfffq/4/

Ý tưởng đằng sau kỹ thuật này là việc đặt chiều cao cho khối được kéo dài và được định vị tuyệt đối sẽ khiến trình duyệt tính toán phần đệm dọc theo tỷ lệ bằng nhau nếu nó được đặt thành auto .

Căn chỉnh với lề trên âm

Phương pháp này đã được biết đến rộng rãi và được sử dụng rất thường xuyên. Giống như cái trước, nó đượ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 đó, 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 trên cùng: 50% và nâng nó lên một nửa chiều cao của chính nó lề-top: -H bên trong / 2.

Bên ngoài ( vị trí: tương đối; ) .inner ( chiều cao: 100px; vị trí: tuyệt đối; trên cùng: 50%; lề trên: -50px; )
http://jsfiddle.net/c1bgfffq/13/

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.

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

Phương pháp này tương tự như phương pháp trước nhưng có thể được sử dụng khi không xác định được độ cao của dàn lạnh. Trong trường hợp này, thay vì đặt khoảng đệm pixel âm, bạn có thể sử dụng thuộc tính biến đổi và di chuyển khối bên trong lên bằng cách sử dụng hàm dịchY và giá trị -50%.

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%); )
http://jsfiddle.net/c1bgfffq/9/

Tại sao phương pháp trước đó Bạn không thể đặt giá trị theo tỷ lệ phần trăm? Vì giá trị phần trăm thuộc tính lềđược tính tương ứng với phần tử cha, giá trị 50% sẽ bằng một nửa chiều cao của hộp bên ngoài và chúng ta cần nâng hộp bên trong lên một nửa chiều cao của chính nó. Thuộc tính biến đổi là hoàn hảo cho việc này.

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

Căn chỉnh với Flexbox

Hầu hết cách hiện đại căn chỉnh theo chiều dọc là sử dụng Flexbox (thường được gọi là Flexbox). mô-đun này 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.

Khối bên ngoài cần được đặt thành display: flex và khối bên trong thành Margin: auto . Và đó là tất cả! Đẹp chứ?

Bên ngoài ( hiển thị: flex; chiều rộng: 200px; chiều cao: 200px; ) . bên trong ( chiều rộng: 100px; lề: tự động; )
http://jsfiddle.net/c1bgfffq/14/

Nhược điểm của phương pháp này là Flexbox chỉ được hỗ trợ bởi các trình duyệt hiện đại.

Tôi nên chọn phương pháp nào?

Bạn cần bắt đầu từ tuyên bố vấn đề:
  • Để căn chỉnh văn bản theo chiều dọc, tốt hơn nên sử dụng thuộc tính thụt lề dọc hoặc thuộc tính line-height.
  • Đối với các phần tử được định vị tuyệt đối với chiều cao đã biết(ví dụ: biểu tượng) phương pháp có thuộc tính lề trên âm là lý tưởng.
  • Đối với các trường hợp phức tạp hơn, khi không xác định được chiều cao của khối, bạn cần sử dụng phần tử giả hoặc thuộc tính biến đổi.
  • Chà, nếu bạn may mắn đến mức không cần hỗ trợ các phiên bản cũ hơn của trình duyệt IE, thì tất nhiên, tốt hơn hết bạn nên sử dụng Flexbox.

Thẻ: Thêm thẻ

Khi tạo các khối div, bạn có thể gặp phải các tình huống cần căn giữa div theo chiều ngang và chiều dọc bằng cách sử dụng CSS thuần túy. Ví dụ: khi tạo cửa sổ bật lên bằng . Có một số cách để triển khai căn giữa và trong bài viết này, tôi sẽ chia sẻ những cách yêu thích và dễ dàng nhất của tôi, sử dụng CSS hoặc jQuery.

Đầu tiên, những điều cơ bản:

Căn giữa theo chiều ngang trong CSS

Điều này rất dễ thực hiện, chúng tôi sử dụng lề cho chúng ta div khối.

ClassName(lề:0 tự động; chiều rộng:200px; chiều cao:200px; )

Để định tâm khối div chỉ theo chiều ngang, bạn cần xác định độ rộng khối (width), sử dụng thuộc tính tự động cho lợi nhuận bên trái và bên phải. Phương pháp này sẽ hiệu quả với mọi người khối yếu tố(div, p, h1, v.v...). Để sử dụng định tâm ngangđối với các phần tử chuỗi (liên kết, hình ảnh ...), bạn cần áp dụng tham số trưng bày:khối;

Căn giữa theo chiều ngang và chiều dọc trong CSS

Việc căn giữa một khối div theo chiều ngang và chiều dọc cùng lúc sẽ phức tạp hơn một chút. Bạn cần biết trước kích thước của khối div.

ClassName( chiều rộng: 300px; chiều cao: 200px; vị trí: tuyệt đối; bên trái: 50%; trên cùng: 50%; lề: -100px 0 0 -150px; )

Bằng cách sử dụng tuyệt đối Bằng cách định vị một khối, chúng ta có thể tách nó khỏi các phần tử xung quanh và xác định vị trí của nó so với kích thước của cửa sổ trình duyệt. Di chuyển khối div sang 50% ở bên trái và trên cùng của cửa sổ. Góc trên cùng bên trái của khối hiện nằm ở giữa cửa sổ trình duyệt. Tất cả những gì còn lại là cài đặt khối div ở giữa trang bằng cách di chuyển nó tới một nửa chiều rộng của nó trái và một nửa chiều cao của nó hướng lên. Hoan hô! Kết quả là sự định tâm tuyệt vời của khối trên css thuần túy mã số.

Định tâm theo chiều ngang và chiều dọc với jQuery

Như đã đề cập trước đây - phương pháp CSSđịnh tâm chỉ hoạt động với kích thước cố định. Nếu kích thước không được xác định, phương thức jQuery sẽ được giải cứu:

$(window).resize(function())( $(".className").css(( location:"absolute", left: ($(window).width() - $(".className").outerWidth ( ))/2, top: ($(window).height() - $(".className").outerHeight())/2 )); // Để chạy một hàm khi cửa sổ được tải: $(window).resize();

Hoạt động phương pháp này là chạy hàm thay đổi kích thước() bằng dòng $(window).resize(). Chức năng này hoạt động bất cứ khi nào cửa sổ trình duyệt được thay đổi kích thước. Chúng tôi sử dụng bên ngoàiWidth() Và chiều cao bên ngoài(), vì ngược lại chiều rộng() Và chiều cao(), chúng bao gồm phần đệm và độ dày đường viền trong kích thước mà chúng trả về. Dòng cuối cùng, bắt đầu quá trình div định tâm chặn khi tải trang.

Ưu điểm của việc sử dụng phương pháp này là bạn có thể không biết kích thước của div. Nhược điểm chính– điều này chỉ hoạt động khi bật JavaScript. Vì vậy, phương pháp này được chấp nhận đối với các giao diện đa chức năng như VKontakte, Facebook, v.v.

Như mọi khi, vui lòng đề xuất phương pháp yêu thích của bạn để căn giữa các khối bằng cách nhận xét.