Thực đơn
trang chủKỹ thuật

Căn chỉnh trung tâm theo chiều ngang CSS. CSS - Căn giữa

Rất thường xuyên trong bố cục, cần phải căn giữa một số phần tử theo chiều ngang và/hoặc chiều dọc. Vì vậy, tôi quyết định thực hiện một bài viết với nhiều cách căn giữa khác nhau để mọi thứ đều có sẵn ở một nơi.

Lề căn chỉnh ngang: tự động

Căn chỉnh theo chiều ngang bằng cách 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à lề 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 bằng 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 độ bên trái và 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 auto; chỉ ngang */ /* lề: 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

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 làm cho văn bản được că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 chênh lệch lưu lượng truy cập, viết quảng cáo và 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.

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 ngang vào giữa khối/trang 1.1. Nếu khối có chiều rộng: div ( width: 300px; lề: 0 auto; /*căn giữa phần tử theo chiều ngang trong khối cha*/ )

Nếu bạn muốn căn chỉnh một 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à không có/chỉ định chiều rộng: .wrapper (text-align: center;) 1.3. Nếu chiều rộng của khối được đặt và bạn cần cố định nó ở giữa khối cha: .wrapper (vị trí: tương đối; /* đặt vị trí tương đối cho khối cha để sau đó chúng ta có thể định vị tuyệt đối khối bên trong nó * /) .box ( width: 400px; vị trí: tuyệt đối ; left: 50%; lề trái: -200px; /*chuyển khối sang trái một khoảng bằng một nửa chiều rộng của nó*/ ) 1.4. Nếu các khối không được chỉ định chiều rộng, bạn có thể căn giữa chúng bằng cách sử dụng khối bao bọc chính: .wrapper (text-align: center; /*center nội dung của khối*/) .box ( display: inline-block; / *sắp xếp các khối thành một hàng theo chiều ngang*/ Margin-right: -0.25em; /*xóa lề phải giữa các khối*/ ) 2. Căn dọc 2.1. Nếu văn bản chiếm một dòng, ví dụ: đối với các nút và mục menu: .button ( Height: 50px; line-height: 50px; ) 2.2. Để căn chỉnh một khối theo chiều dọc bên trong khối cha: .wrapper (vị trí: tương đối;) .box ( chiều cao: 100px; vị trí: tuyệt đối; trên cùng: 50%; lề: -50px 0 0 0; ) 2.3. Căn dọc theo loại bảng: .wrapper ( display: table; width: 100%; ) .box ( display: table-cell; Height: 100px; text-align: center; Vertical-align: middle; ) 2.4. Nếu một hộp có chiều rộng và chiều cao và cần được căn giữa vào hộp mẹ của nó: .wrapper ( vị trí: tương đối; ) .box ( chiều cao: 100px; chiều rộng: 100px; vị trí: tuyệt đối; trên cùng: 0; phải: 0; dưới cùng : 0; trái: 0; lề: auto; tràn: auto; /*để nội dung không bị tràn ra*/ ) 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ử

div ( width: 300px; /*đặt chiều rộng của khối*/ Height:100px; /*đặt chiều cao của khối*/ Transform: Translate(-50%, -50%); location: tuyệt đối; top: 50 %; trái: 50% ;

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

Một số văn bản ở đây h1 ( lề: 0; biến đổi: dịch(-50%, -50%); vị trí: tuyệt đối; trên cùng: 50%; trái: 50%; )

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. Chúng tôi định vị khối với thuộc tính trên cùng và bên trái ở mức 50%, đồ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 của 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. Ngoài ra, 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. Đối với khối, chúng tôi đặt chiều rộng và chiều cao, đặt 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à các thanh cuộn hoạt động trên phần gốc, nếu phần sau có chiều rộng và chiều cao được đặt 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. Chúng tôi đặt kiểu bảng cho ô cha và đặt căn chỉnh văn bản ở giữa cho ô cha. Và chúng tôi cung cấp cho khối một 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. Ý tưởng là tạo kiểu cho phần tử giả before trên phần tử gốc, cụ thể là 100% chiều cao, căn giữa và mô hình khối nội tuyến. Theo cách tương tự, bản thân khối được đặt thành mô hình khối đường, căn chỉnh về giữa. Để ngăn khối “rơi” dưới phần tử giả khi kích thước của phần tử đầu tiên lớn hơn phần tử mẹ của nó, chúng tôi chỉ báo cho phần tử gốc khoảng trắng: nowrap và cỡ chữ: 0, sau đó chúng tôi hủy các kiểu này cho khối có nội dung sau - khoảng trắng: bình thường. Trong ví dụ này, font-size: 0 là cần thiết để xóa khoảng trắng giữa khối cha 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 đáng ghi nhớ khi chọn phương pháp này là hỗ trợ cho IE từ phiên bản 10 trở đi. 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ẽ có tác dụng 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ị: khối; ) )

Tùy chọn 7. Nút. Tùy chọn azproduction của người dùng, trong đó khối được đóng khung trong 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ó; ) )

Phần thưởng Sử dụng ý tưởng của tùy chọn thứ 4, bạn có thể đặt lề bên ngoài cho khối, đồng thời khố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 hình ảnh gốc, hãy chia tỷ lệ hình ảnh đó theo kích thước của hình ảnh gốc.
Ví dụ: jsfiddle.net/serdidg/nfqg9rza/3.
Ví dụ với một bức tranh lớn:

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