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

Từ tác giả: Tôi chào mừng bạn một lần nữa đến với các trang blog của chúng tôi. Trong bài viết hôm nay tôi muốn nói về các kỹ thuật căn chỉnh khác nhau có thể áp dụng cho cả khối và nội dung của chúng. Đặc biệt là cách căn chỉnh các khối trong css cũng như căn chỉnh văn bản.

Căn chỉnh các khối vào giữa

Trong CSS, việc căn giữa một khối rất dễ dàng. Đây là kỹ thuật được nhiều người biết đến nhất, nhưng trước hết tôi muốn nói về nó ngay bây giờ. Điều này có nghĩa là căn chỉnh căn giữa theo chiều ngang so với phần tử gốc. Nó được thực hiện như thế nào? Giả sử chúng ta có một vùng chứa và đối tượng thử nghiệm của chúng ta ở trong đó:

< div id = "wrapper" > < div id = "header" > < / div > < / div >

Giả sử rằng đây là tiêu đề trang web. Nó không trải dài trên toàn bộ chiều rộng của cửa sổ và chúng ta cần căn giữa nó. Chúng tôi viết như thế này:

#tiêu đề( chiều rộng / chiều rộng tối đa: 800px; lề: 0 tự động;

Chúng ta cần chỉ định chiều rộng chính xác hoặc tối đa, sau đó ghi lại thuộc tính chính - lề: 0 tự động. Nó đặt lề ngoài của tiêu đề của chúng ta, giá trị đầu tiên xác định lề trên và dưới và giá trị thứ hai xác định lề phải và trái. Giá trị auto yêu cầu trình duyệt tự động tính toán phần đệm ở cả hai bên để phần tử được căn giữa chính xác trên phần tử mẹ của nó. Thoải mái!

Căn chỉnh văn bản

Đây cũng là một kỹ thuật rất đơn giản. Để căn chỉnh tất cả các phần tử nội tuyến, bạn có thể sử dụng thuộc tính text-align và các giá trị của nó: left, right, center. Cái sau căn giữa văn bản, đó là những gì chúng ta cần. Bạn thậm chí có thể căn chỉnh ảnh theo cách tương tự vì theo mặc định, nó cũng là một thành phần nội tuyến.

Căn chỉnh văn bản theo chiều dọc

Nhưng điều này phức tạp hơn. Theo mặc định, không có thuộc tính đơn giản, nổi tiếng nào có thể dễ dàng căn giữa văn bản theo chiều dọc trong vùng chứa khối. Tuy nhiên, có một số kỹ thuật mà các nhà thiết kế bố cục đã nghĩ ra trong nhiều năm qua.

Đặt chiều cao khối bằng cách sử dụng phần đệm. Cách này không phải là đặt chiều cao rõ ràng bằng cách sử dụng chiều cao mà là tạo chiều cao một cách giả tạo bằng cách sử dụng các phần đệm ở trên cùng và dưới cùng, các phần này phải giống nhau. Hãy tạo bất kỳ khối nào và viết các thuộc tính sau vào nó:

div(nền: #ccc; phần đệm: 30px 0; )

div( nền : #ccc; phần đệm: 30px 0;

Nền chỉ để hiển thị trực quan các cạnh cũng như phần đệm. Bây giờ chiều cao của khối được tạo thành từ hai vết lõm này và chính dòng đó, và tất cả trông như thế này:

Xác định chiều cao dòng cho khối. Tôi nghĩ đây là cách chính xác hơn nếu bạn cần căn chỉnh một dòng văn bản. Với nó, bạn có thể viết chiều cao theo cách thông thường bằng cách sử dụng thuộc tính chiều cao. Sau đó, anh ta cũng cần đặt chiều cao của dòng, giống như chiều cao của toàn bộ khối.

div( chiều cao: 60px; chiều cao dòng: 60px; )

div( chiều cao: 60px; chiều cao dòng: 60px;

Kết quả sẽ tương tự như hình trên. Mọi thứ sẽ hoạt động ngay cả khi bạn thêm phần đệm. Tuy nhiên, chỉ cho một dòng. Nếu bạn cần thêm văn bản trong phần tử thì phương pháp này sẽ không hoạt động.

Chuyển đổi một khối thành một ô bảng. Bản chất của phương pháp này là ô trong bảng có thuộc tính Vertical-align: middle, giúp phần tử căn giữa theo chiều dọc. Theo đó, trong trường hợp này, khối cần được đặt thành như sau:

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

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

Phương pháp này tốt vì bạn có thể căn chỉnh bao nhiêu văn bản tùy thích vào giữa. Nhưng tốt hơn hết là viết display: table vào khối mà div của chúng ta được lồng vào, nếu không nó có thể không hoạt động.

Chà, ở đây chúng ta đến với kỹ thuật cuối cùng của ngày hôm nay - đây là việc căn chỉnh các khối theo chiều dọc. Phải nói rằng, một lần nữa, không có tài sản nào dành riêng cho việc này, nhưng có một số thủ thuật mà bạn nên biết.

Đặt thụt lề theo tỷ lệ phần trăm. Nếu bạn biết chiều cao của phần tử gốc và đặt một phần tử khối khác vào bên trong nó, bạn có thể căn giữa nó bằng cách sử dụng phần đệm phần trăm. Ví dụ: cha mẹ có chiều cao 600 pixel. Bạn đặt một khối có chiều cao 300 pixel vào đó. Bạn cần lùi lại bao nhiêu ở phần trên và phần dưới để căn giữa nó? Mỗi pixel 150 pixel, bằng 25% chiều cao của bố mẹ.

Phương pháp này chỉ cho phép căn chỉnh khi kích thước cho phép tính toán. Và nếu cha mẹ của bạn có chiều cao 887 pixel, thì bạn sẽ không thể ghi lại chính xác bất cứ điều gì, điều này đã rõ ràng.

Chèn một phần tử vào một ô của bảng. Một lần nữa, nếu chúng ta chuyển đổi phần tử cha thành một ô trong bảng thì khối được chèn vào nó sẽ tự động được căn giữa theo chiều dọc. Để làm được điều này, cha mẹ chỉ cần đặt Vertical-align: middle.

Và nếu ngoài điều này, chúng ta còn viết lề: 0 tự động, thì phần tử sẽ được căn giữa theo chiều ngang!

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 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 để 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 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). 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 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à 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 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/

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:

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

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

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

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

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à chiều rộng của nó không được chỉ định/chỉ định:

.wrapper(text-align: center;)

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

.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; trái: 50%; lề trái: -200px; / *dịch 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; /*đặt nội dung của khối vào giữa*/) .box ( display: inline-block; /*sắp xếp các khối theo chiều ngang*/ lề-phải: -0.25em; /* xóa khoảng trắng phù hợp giữa các khối*/ )

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

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

.button ( chiều cao: 50px; chiều cao dòng: 50px; )

2.2. Để căn chỉnh theo chiều dọc một khối 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 chỉnh theo chiều dọc theo loại bảng:

.wrapper ( hiển thị: bảng; chiều rộng: 100%; ) .box ( hiển thị: ô bảng; chiều cao: 100px; căn chỉnh văn bản: giữa; căn chỉnh dọc: giữa; )

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

.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ề: tự động; tràn: tự động; /*to nội dung không được lan truyền */ )

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

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

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

h1 ( lề: 0; biến đổi: dịch(-50%, -50%); vị trí: tuyệt đối; trên cùng: 50%; trái: 50%; )

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 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 để 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 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). 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 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à 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 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/

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:

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

Thẻ: Thêm thẻ

Một nhà thiết kế đôi khi có một câu hỏi: cách căn giữa các phần tử theo chiều dọc? Và điều này gây ra một số vấn đề nhất định. Tuy nhiên, có một số phương pháp để căn giữa các phần tử theo chiều dọc và mỗi phương pháp này khá đơn giản. Bài viết này mô tả một số phương pháp này.

Để xem từng phương pháp đang hoạt động, hãy nhấp vào nút demo hoặc trên hình ảnh.

Hãy thảo luận về một số vấn đề cản trở việc định tâm theo chiều dọc.

Căn dọc

Việc căn giữa theo chiều ngang của một phần tử khá dễ thực hiện (sử dụng CSS). Một phần tử nội tuyến có thể được căn giữa theo chiều ngang bằng cách cấp cho vùng chứa chính của nó một thuộc tính text-align là center . Khi một phần tử là phần tử khối thì để căn giữa nó, bạn chỉ cần thiết lập độ rộng (width) và đặt giá trị của lề phải (margin-right) và lề trái (margin-left) thành auto.

Về văn bản: nhiều người đang bắt đầu sử dụng thuộc tính căn chỉnh dọc để căn giữa. Điều đó hợp lý và lựa chọn đầu tiên của tôi cũng sẽ như vậy. Để căn giữa một phần tử trong bảng, bạn có thể sử dụng thuộc tính valign.

Tuy nhiên, thuộc tính valign chỉ có tác dụng khi áp dụng cho một ô (ví dụ: ). Thuộc tính căn chỉnh dọc CSS có thể được áp dụng cho một ô và một số phần tử nội tuyến.

• Văn bản được căn giữa tương ứng với chiều cao dòng (khoảng cách dòng).
• Liên quan đến bảng, không đi sâu vào chi tiết, việc căn giữa xảy ra tương ứng với chiều cao của hàng.

Thật không may, thuộc tính căn chỉnh dọc không thể được áp dụng cho các phần tử cấp khối, chẳng hạn như đoạn văn (p) bên trong thẻ div.

Tuy nhiên, có các phương pháp khác để căn giữa các phần tử theo chiều dọc và bạn vẫn có thể sử dụng thuộc tính căn chỉnh dọc khi cần. Việc sử dụng phương pháp nào phụ thuộc vào những gì bạn định tập trung vào.

Khoảng cách dòng hoặc Chiều cao dòng

Phương pháp này chỉ nên sử dụng khi bạn cần căn giữa một dòng văn bản. Để thực hiện việc này, bạn cần đặt chiều cao dòng (khoảng cách dòng) của phần tử chứa văn bản lớn hơn cỡ chữ.

Theo mặc định, có khoảng cách bằng nhau ở trên và dưới văn bản, do đó văn bản được căn giữa theo chiều dọc.

Trong trường hợp này, không cần thiết phải chỉ định chiều cao của phần tử cha.