Thực đơn
trang chủSự cố

Định tâm CSS của khối DIV: ngang và dọc. Các phương pháp căn chỉnh trung tâm theo chiều dọc trong CSS

Bài viết hôm nay nhằm mục đích chỉ cho bạn cách căn giữa một div, theo cả chiều ngang và chiều dọc, bằng cách sử dụng một số thủ thuật CSS. Chúng tôi cũng sẽ cho bạn biết cách căn giữa toàn bộ trang hoặc trong một phần tử div riêng lẻ.

Dễ dàng căn giữa phần tử DIV trên trang

Phương pháp này sẽ hoạt động hoàn hảo trong tất cả các trình duyệt.

CSS

Center-div ( lề: 0 tự động; chiều rộng: 100px; )

Ví dụ

Giá trị auto trong thuộc tính lề đặt lề trái và lề phải cho toàn bộ không gian có sẵn trên trang. Điều quan trọng cần nhớ ở đây là phần tử div ở giữa phải được đặt giá trị chiều rộng.

Căn giữa DIV bên trong phần tử DIV theo cách cũ

Phương pháp div căn giữa này sẽ hoạt động trong tất cả các trình duyệt.

CSS

Div bên ngoài ( đệm: 30px; ) .inner-div ( lề: 0 tự động; chiều rộng: 100px; )

HTML

Ví dụ

Div bên ngoài có thể được đặt theo bất kỳ cách nào bạn thích, nhưng div bên trong phải có chiều rộng (width) được chỉ định.

Căn giữa DIV bên trong phần tử DIV bằng khối nội tuyến

Trong phương pháp căn giữa div trong div này, không cần thiết phải chỉ định chiều rộng của phần tử bên trong. Nó sẽ hoạt động trong tất cả các trình duyệt hiện đại, bao gồm IE8.

CSS

Div bên ngoài ( đệm: 30px; căn chỉnh văn bản: giữa; ) .inner-div ( hiển thị: khối nội tuyến; đệm: 50px; )

HTML

Ví dụ

Thuộc tính text-align chỉ hoạt động trên các phần tử nội tuyến. Giá trị khối nội tuyến cho phép div bên trong được hiển thị dưới dạng phần tử nội tuyến và cũng như một khối (khối nội tuyến). Thuộc tính text-align trên phần tử div bên ngoài sẽ cho phép chúng ta căn giữa div bên trong.

Căn giữa DIV bên trong phần tử DIV theo chiều ngang và chiều dọc

Ở đây lề: auto được sử dụng để căn giữa div ở giữa trang. Ví dụ này sẽ hoạt động trong tất cả các trình duyệt hiện đại.

CSS

Div bên ngoài ( đệm: 30px; ) .inner-div ( lề: tự động; chiều rộng: 100px; chiều cao: 100px; )

HTML

Ví dụ

Phần tử div bên trong phải có chiều rộng (chiều rộng) và chiều cao (chiều cao) được chỉ định. Phương thức sẽ không hoạt động nếu phần tử div bên ngoài có chiều cao cố định.

Căn giữa DIV ở cuối trang

Ở đây, lề: tự động được sử dụng để căn giữa div theo chiều dọc và định vị tuyệt đối được sử dụng cho phần tử bên ngoài. Phương pháp này sẽ hoạt động trong tất cả các trình duyệt hiện đại.

CSS

Div bên ngoài (vị trí: tuyệt đối; dưới cùng: 30px; chiều rộng: 100%; ) .inner-div ( lề: 0 tự động; chiều rộng: 100px; chiều cao: 100px; màu nền: #ccc; )

HTML

Ví dụ

Div bên trong phải được đặt chiều rộng. Khoảng trống ở cuối trang được điều chỉnh bằng thuộc tính dưới cùng của div bên ngoài. Bạn cũng có thể căn giữa div ở đầu trang bằng cách thay thế thuộc tính dưới cùng bằng thuộc tính trên cùng.

Căn giữa DIV trên trang theo chiều dọc và chiều ngang

Ở đây, để căn giữa div, chúng ta lại sử dụng lề: auto và định vị tuyệt đối của div bên ngoài. Phương pháp này sẽ hoạt động trong tất cả các trình duyệt hiện đại.

CSS

Center-div (vị trí: tuyệt đối; lề: tự động; trên cùng: 0; phải: 0; dưới cùng: 0; trái: 0; chiều rộng: 100px; chiều cao: 100px; )

Ví dụ

Phần tử div phải có chiều rộng (width) và chiều cao (height).

Tạo định tâm thích ứng của phần tử DIV trên trang

Ở đây, để căn giữa div bằng CSS, chúng tôi làm cho chiều rộng của phần tử div phản ứng nhanh để nó phản hồi với những thay đổi về kích thước cửa sổ. Phương pháp này hoạt động trong tất cả các trình duyệt.

CSS

Center-div ( lề: 0 tự động; chiều rộng tối đa: 700px; )

Ví dụ

Phần tử div ở giữa phải được đặt thuộc tính chiều rộng tối đa.

Định tâm DIV bên trong một phần tử bằng cách sử dụng thuộc tính khối bên trong

Phần tử div bên trong ở đây có tính đáp ứng. Phương pháp căn giữa div bên trong div này sẽ hoạt động trên tất cả các trình duyệt.

CSS

Div bên ngoài ( đệm: 30px; ) .inner-div ( lề: 0 tự động; chiều rộng tối đa: 700px; )

HTML

Ví dụ

Div bên trong phải được đặt thuộc tính chiều rộng tối đa.

Căn giữa hai div đáp ứng cạnh nhau

Ở đây chúng ta có hai phần tử div đáp ứng cạnh nhau. Phương pháp đặt div ở giữa màn hình này sẽ hoạt động trong tất cả các trình duyệt hiện đại.

CSS

Vùng chứa ( text-align: center; ) .left-div ( display: inline-block; max-width: 300px; Vertical-align: top; ) .right-div ( display: inline-block; max-width: 150px; ) màn hình và (max-width: 600px) ( .left-div, .right-div ( lef max-width: 100%; ) )

HTML

Ví dụ

Ở đây chúng ta có một số phần tử được áp dụng thuộc tính khối nội tuyến, nằm bên trong vùng chứa ở giữa. Ví dụ này cũng sử dụng truy vấn phương tiện CSS; nghĩa là, nếu kích thước màn hình nhỏ hơn 600 pixel thì thuộc tính chiều rộng tối đa cho cả div bên trái và bên phải được đặt thành 100%.

Phần tử DIV được căn giữa bằng Flexbox

Ở đây chúng tôi căn giữa div CSS bằng Flexbox. Nó nhằm mục đích tạo thuận lợi cho quá trình phát triển thiết kế giao diện người dùng. Mô-đun này được hỗ trợ bởi Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+, cũng như Trình duyệt Android 40+.

CSS

Vùng chứa ( display: flex; căn chỉnh-items: center;just-content: center; chiều cao: 100vh; ) .item ( màu nền: #f3f2ef; bán kính đường viền: 3px; chiều rộng: 200px; chiều cao: 100px; )

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

Thông thường trong quá trình bố trí cần phải căn chỉnh văn bản theo chiều dọc trong một khối. Nếu việc này cần được thực hiện trong một ô của bảng thì giá trị của thuộc tính CSS căn chỉnh theo chiều dọc sẽ được đặt.

Nhưng một câu hỏi hợp lý được đặt ra: liệu có thể thực hiện mà không cần bảng mà không làm bố cục trang bị quá tải với các thẻ không cần thiết không? Câu trả lời là “bạn có thể”, nhưng do trình duyệt MSIE hỗ trợ CSS kém nên giải pháp cho vấn đề này sẽ khác với giải pháp dành cho các trình duyệt phổ biến khác.

Ví dụ, hãy xem xét đoạn sau:


div(
đường viền: 1px liền khối #000;
chiều cao: 10em;
chiều rộng: 10em;
}


Một số tiếp theo

và cố gắng căn chỉnh văn bản theo chiều dọc vào giữa khối và cạnh dưới cùng của khối.

Giải quyết vấn đề trình duyệt “Đúng” (bao gồm MSIE

Hầu hết các trình duyệt hiện đại đều hỗ trợ CSS2.1, cụ thể là giá trị ô bảng cho thuộc tính display. Điều này cho chúng ta cơ hội buộc một khối văn bản xuất hiện dưới dạng một ô trong bảng và tận dụng lợi thế này để căn chỉnh văn bản theo chiều dọc:

div(
hiển thị: ô bảng;
căn dọc: giữa;
}

div(
hiển thị: ô bảng;
căn dọc: dưới cùng;
}

Internet Explorer (bao gồm phiên bản 7)

Bạn có thể giải quyết vấn đề căn chỉnh văn bản về cạnh dưới cùng của một khối trong MSIE bằng cách sử dụng định vị tuyệt đối (ở đây chúng ta sẽ cần một phần tử chuỗi được nhúng trong một khối):

div(
vị trí: tương đối;
}
khoảng div(
hiển thị: khối;
vị trí: tuyệt đối;
đáy: 0%;
trái: 0%;
chiều rộng: 100%;
}

Bộ quy tắc này cũng hoạt động trong các trình duyệt “đúng”.

Chỉ định thuộc tính

Khoảng phân chia (
hiển thị: khối;
chiều rộng: 100%;
}

không cần thiết, nhưng chúng có thể cần thiết nếu, ngoài việc căn chỉnh văn bản theo chiều dọc, bạn còn định sử dụng căn chỉnh theo chiều ngang, ví dụ: text-align: center ;.

Để căn chỉnh văn bản theo chiều dọc vào giữa khối, đoạn ban đầu vẫn sẽ phải phức tạp - chúng tôi sẽ giới thiệu một thành phần dòng khác:

Tài liệu để nghiên cứu:

  • Định tâm dọc trong CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
  • Định tâm dọc bằng CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
  • Căn dọc (www.cssplay.co.uk/ie/valign.html)
  • dọc-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
  • Một phương pháp căn chỉnh dọc khác trong CSS (cssing.org.ua/2007/04/26/another-css-valign-method)
  • CSS
  • HTML

    • 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 bằng cách sử dụng:

    • 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 biết kích thước của các khối bên ngoài và bên trong. 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 để chúng ta có thể nhìn thấy đường viền của chúng.

    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 của chính phần tử chứ không phải nội dung của nó (ngoại trừ khi nó được áp dụng cho các ô trong bảng). Do đó, việc áp dụng thuộc tính này cho phần tử bên ngoài không tạo ra bất cứ thứ gì. Hơn nữa, việc áp dụng thuộc tính này cho một phần tử bên trong cũng sẽ không có tác dụng gì, vì các 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 ta, chúng ta 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 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ể thiết lập 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à nó chỉ được áp dụng trong một số trường hợp hạn chế khi đã biết chiều cao của cả hai khối.

    Căn chỉnh theo 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/

    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 xác định lại giá trị chiều cao dòng cho khối bên trong, đồng thời 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:

  • đặ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;
  • 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;
  • đặ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 sử dụng 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 bằng cách sử dụng biến đổi Phương pháp này tương tự như phương pháp trước, nhưng nó có thể được sử dụng khi không xác định được chiều cao của khối bên trong. 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ịch Y 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 không thể đặt giá trị dưới dạng phần trăm trong phương pháp trước? Vì giá trị lề phần trăm được tính tương ứng với phần tử gốc nên 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 sẽ 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 Cách căn chỉnh dọc hiện đại nhất 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.

    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 thuộc tính CSS Vertical-align tuyệt vời. 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).

    Báo cáo vấn đề: Cần phải căn chỉnh nội dung của khối có chiều cao thay đổi ở giữa 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:

    Chặn nội dung

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

    Chặn nội dung

    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à điều đáng tiếc: 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:

    Một đoạn văn bản chào mừng bạn!

    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.

    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.

    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 căn chỉnh theo chiều dọc của CSS sẽ đáp ứng 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 chăng nữa, chúng tôi sẽ sử dụng thuộc tính Vertical-align để căn chỉnh trong vùng chứa div. 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 hiển thị CSS cho phép chúng ta biến khối div của mình thành một ô 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:

    Chặn nội dung

    Đố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 thứ 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(cả IE6, IE7 và IE8 đều không quen thuộc với thuộc tính này). Do đó, bằng cách sử dụng nhận xét có điều kiện dành riêng cho các trình duyệt thuộc họ IE, chúng tôi sẽ chỉ ra các thuộc tính CSS khác.

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

    Loại công trình:

    ... Hướng dẫn chỉ áp dụng nếu điều kiện trong ngoặc vuông là đúng...

    đượ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:

    Đây là một loại văn bản xác minh.
    Nó bao gồm hai dòng.

    Đố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 theo chiều dọc, trong tất cả các trình duyệt ngoại trừ IE.

    Bây giờ chúng tôi bắt đầu thêm các thuộc tính liên quan đến căn chỉnh cho các trình duyệt thuộc họ IE (đối với chúng, 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 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 50% chiều cao của khối màu tím để làm tâm của khối màu vàng chứ 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 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 một nhận xét có điều kiện; không phải vô ích mà chúng ta đã làm quen với nó:

    .textalign div(vị trí: tuyệt đối; trên cùng: 50%; ) .textalign span(vị trí: tương đối; trên cùng: -50%; )

    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 đề: bạ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 đặt chiều cao của khối lớp căn chỉnh văn bản về mặt tỷ lệ phần trăm, thì sẽ không có gì phù hợp với bạn.

    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 đậm; )

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