Thực đơn
trang chủTừ

Căn chỉnh các phần tử theo chiều dọc bằng CSS. Căn chỉnh theo chiều ngang và chiều dọc của các phần tử

  • 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 sử dụng 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ị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.

    Trong CSS, một số điều tưởng chừng đơn giản lại không dễ thực hiện. Một trong những điều này là sự liên kết, tức là. khi một phần tử cần được định vị theo một cách nhất định so với phần tử khác.

    Bài viết này trình bày một số giải pháp có sẵn sẽ giúp đơn giản hóa công việc căn giữa các phần tử theo chiều ngang và/hoặc chiều dọc.

    Lưu ý: Bên dưới mỗi giải pháp là danh sách các trình duyệt cho biết phiên bản mà mã CSS được chỉ định hoạt động.

    CSS - Khối căn giữa

    1. Căn chỉnh một khối vào giữa khối khác. Trong trường hợp này, khối thứ nhất và thứ hai có kích thước động.

    ...
    ...

    Cha mẹ ( vị trí: tương đối; ) .con ( vị trí: tuyệt đối; bên trái: 50%; trên cùng: 50%; -webkit-transform: dịch (-50%, -50%); -moz-transform: dịch (-50% , -50%); -ms-transform: dịch(-50%, -50%); -o-transform: dịch(-50%, -50%); biến đổi: dịch(-50%, -50%) ; )

    • Chrome 4.0+
    • Firefox 3.6+
    • Internet Explorer 9+
    • Opera 10.5+
    • Safari 3.1+

    2. Căn chỉnh một khối vào giữa khối khác. Trong trường hợp này, khối thứ hai có kích thước cố định.

    Cha mẹ ( vị trí: tương đối; ) .con ( vị trí: tuyệt đối; trái: 50%; trên cùng: 50%; /* chiều rộng và chiều cao của 2 khối */ chiều rộng: 500px; chiều cao: 250px; /* Giá trị được xác định tùy thuộc trên kích thước của nó */ /* lề trái = - width / 2 */ lề trái: -250px; /* lề trên = - chiều cao / 2 */ lề-top: -125px; )

    Các trình duyệt hỗ trợ giải pháp này:

    • Chrome 1.0+
    • Firefox 1.0+
    • Internet Explorer 4.0+
    • Opera 7.0+
    • Safari 1.0+

    3. Căn chỉnh một khối vào giữa khối khác. Trong trường hợp này, khối thứ hai có kích thước được chỉ định theo tỷ lệ phần trăm.

    Cha (vị trí: tương đối;) .con (vị trí: tuyệt đối; /* chiều rộng và chiều cao của 2 khối trong % */ chiều cao: 50%; chiều rộng: 50%; /* Giá trị được xác định tùy thuộc vào kích thước của nó trong % * / left: 25%; /* (100% - chiều rộng) / 2 */ top: 25%; /* (100% - chiều cao) / 2 */ )

    Các trình duyệt hỗ trợ giải pháp này:

    • Chrome 1.0+
    • Firefox 1.0+
    • Internet Explorer 4.0+
    • Opera 7.0+
    • Safari 1.0+

    CSS - Căn chỉnh theo chiều ngang

    1. Căn chỉnh một phần tử khối (hiển thị: khối) so với phần tử khác (trong đó nó nằm) theo chiều ngang:

    ...
    ...

    Chặn ( lề-trái: auto; lề-phải: auto; )

    Các trình duyệt hỗ trợ giải pháp này:

    • Chrome 1.0+
    • Firefox 1.0+
    • Internet Explorer 6.0+
    • Opera 3.5+
    • Safari 1.0+

    2. Căn chỉnh phần tử line (display: inline) hoặc line-block (display: inline-block) theo chiều ngang:

    ...
    ...

    Cha mẹ ( text-align: center; ) .child ( display: inline-block; )

    Các trình duyệt hỗ trợ giải pháp này:

    • Chrome 1.0+
    • Firefox 3.0+
    • Internet Explorer 8.0+
    • Opera 7.0+
    • Safari 1.0+

    CSS - Căn chỉnh theo chiều dọc

    1. Căn giữa một phần tử (hiển thị: nội tuyến, hiển thị: khối nội tuyến) so với phần tử khác (trong đó nó nằm) ở giữa. Khối cha trong ví dụ này có chiều cao cố định, được đặt bằng thuộc tính CSS line-height.

    ...
    ...

    Cha mẹ ( line-height: 500px; ) .child ( display: inline-block; Vertical-align: middle; )

    Các trình duyệt hỗ trợ giải pháp này:

    • Chrome 1.0+
    • Firefox 3.0+
    • Internet Explorer 8.0+
    • Opera 7.0+
    • Safari 1.0+

    2. Căn giữa một khối so với khối khác theo chiều dọc bằng cách biểu thị khối cha là một bảng và khối con là một ô của bảng này.

    Cha mẹ ( display: table; ) .child ( display: table-cell; Vertical-align: middle; )

    Các trình duyệt hỗ trợ giải pháp này:

    • Chrome 1.0+
    • Firefox 1.0+
    • Internet Explorer 8.0+
    • Opera 7.5+
    • Safari 1.0+

    Nếu bạn biết bất kỳ thủ thuật thú vị nào khác hoặc các giải pháp căn chỉnh hữu ích làm sẵn, hãy chia sẻ chúng trong phần bình luận.

    Thuộc tính CSS Vertical-align chịu trách nhiệm căn chỉnh văn bản và hình ảnh theo chiều dọc trên trang. Tính năng quan trọng là nó chỉ hoạt động với các phần tử bảng, phần tử nội tuyến và khối nội tuyến. Được hỗ trợ bởi tất cả các trình duyệt hiện đại.

    Cú pháp CSS căn chỉnh theo chiều dọc

    ... căn dọc : giá trị ; ...
    • đường cơ sở - căn chỉnh theo đường cơ sở của tổ tiên (hoặc đơn giản là ranh giới dưới của cha mẹ)
    • dưới cùng - căn chỉnh về cuối dòng (hoặc phần tử nằm bên dưới tất cả)
    • ở giữa - căn chỉnh điểm giữa của phần tử với đường cơ sở của phần tử gốc cộng với một nửa chiều cao của phần tử gốc
    • sub - hiển thị xảy ra bên dưới dòng (trông giống như chỉ số dưới)
    • super - hiển thị xảy ra phía trên dòng (dưới dạng chỉ số trên)
    • text-bottom - căn chỉnh đường viền dưới cùng của phần tử với cạnh dưới cùng của dòng
    • text-top - căn chỉnh đường viền trên cùng của phần tử với cạnh trên của dòng
    • top - căn chỉnh cạnh trên của phần tử với phần trên cùng của phần tử cao nhất trong dòng
    • kế thừa - kế thừa giá trị của cha mẹ
    • giá trị - được biểu thị bằng pixel. Một số dương dịch chuyển lên trên so với đường cơ sở. Tiêu cực xuống
    • lãi suất - được biểu thị bằng tỷ lệ phần trăm. Một số dương dịch chuyển lên trên so với đường cơ sở. Tiêu cực xuống

    Giá trị căn chỉnh dọc mặc định:

    • đường cơ sở (đối với các phần tử nội tuyến)
    • giữa (đối với các ô của bảng)

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

    Việc sử dụng căn chỉnh dọc phổ biến nhất là trong các ô của bảng. Trong thẻ

    sử dụng thuộc tính valign.

    Cú pháp CSS valign cho bảng

    Trong đó giá trị có thể nhận các giá trị sau:

    • đường cơ sở - căn chỉnh đường cơ sở của dòng văn bản đầu tiên
    • dưới cùng - căn chỉnh với cạnh dưới cùng của ô bảng
    • giữa - căn chỉnh vào giữa ô
    • top - căn chỉnh theo cạnh trên của ô

    Ví dụ:

    hoặc
    Căn chỉnh lên trên cùng
    Căn giữa
    Căn chỉnh dưới cùng
    Căn chỉnh lên trên cùng
    Căn giữa
    Căn chỉnh dưới cùng

    Ví dụ về căn chỉnh theo chiều dọc

    Ví dụ 1. Căn chỉnh các giá trị theo chiều dọc: đường cơ sở, dưới cùng, trên cùng, phụ


    Văn bản được căn chỉnh vert_align_baseline
    Văn bản đã căn chỉnh vert_align_bottom
    Văn bản đã căn chỉnh vert_align_top
    Văn bản có căn chỉnh vert_align_sub

    Ví dụ 2: Vertical-align value: giá trị tuyệt đối và phần trăm

    Dưới đây là ví dụ về căn chỉnh dọc với giá trị tuyệt đối và tỷ lệ phần trăm.





    Chuyển đổi thành phần sau trên trang:

    Chuỗi nguồn. Văn bản được căn chỉnh lên 10 pixel
    Chuỗi nguồn. Văn bản được căn chỉnh xuống 5 pixel
    Chuỗi nguồn. Văn bản được căn chỉnh tăng 50%
    Chuỗi nguồn. Văn bản được căn chỉnh giảm 30%

    Ghi chú

    Giá trị Vertical-align: middle không căn chỉnh phần tử nội tuyến vào giữa phần tử lớn nhất trong dòng (như người ta mong đợi). Thay vào đó, giá trị ở giữa căn chỉnh phần tử tương ứng với chữ thường giả định "X" (còn gọi là chiều cao x).

    Để truy cập căn chỉnh dọc từ JavaScript, bạn cần viết cấu trúc sau:

    object.style.verticalAlign ="VALUE "

    Vấn đề căn giữa các phần tử theo chiều dọc trong CSS có một số giải pháp có sẵn. Việc lựa chọn phương pháp căn chỉnh trong từng trường hợp riêng lẻ phụ thuộc vào loại, kích thước, vị trí của các phần tử và các thuộc tính khác được chỉ định cho chúng.

    Dưới đây là một số kỹ thuật căn chỉnh dọc phổ biến trong số các nhà thiết kế bố cục. Nó cho thấy cách chúng hoạt động và trong trường hợp nào thì chúng phù hợp nhất.

    Đây là hai phần tử div:



    Mỗi phương pháp sẽ được sử dụng để căn chỉnh dàn lạnh với tâm của dàn nóng.

    chiều cao dòng cho một dòng

    Khi phần tử cha chiếm một dòng văn bản và đã biết chiều cao của phần tử con, thuộc tính line-height có thể được áp dụng. Giá trị thuộc tính phải bằng chiều cao của khối bên ngoài. Điều này chỉ hoạt động trên một dòng, vì vậy sẽ rất hữu ích nếu thêm tràn: ẩn và khoảng trắng: nowrap cho trẻ.

    Sẽ không thể sử dụng ký hiệu phần trăm line-height=100%, vì 100% trong trường hợp này là chiều cao phông chữ.

    Thùng đựng hàng (
    chiều cao: 300px;
    chiều cao dòng: 300px;
    }

    Bên trong (
    khoảng trắng: nowrap;
    tràn: ẩn;
    }

    Phương pháp này chỉ có thể áp dụng nếu biết chiều cao của khối bên ngoài.

    Bảng được căn chỉnh theo chiều dọc

    Một bảng là lý tưởng cho việc căn chỉnh các phần tử theo chiều dọc. Để không vi phạm ngữ nghĩa, tốt hơn hết bạn nên tạo các thành phần bảng bằng CSS. Vị trí của nội dung trong ô được điều khiển bằng cách căn chỉnh theo chiều dọc. Có bốn giá trị cho thuộc tính này trong bảng:

    Đường cơ sở - mặc định;
    . đáy - nội dung ở cuối ô;
    . giữa - nội dung ở giữa ô;
    . top - nội dung ở đầu ô.

    Trong ví dụ đầu tiên, một ô của bảng sẽ trở thành khối bên ngoài.

    Thùng đựng hàng (
    hiển thị: ô bảng;
    căn dọc: giữa;
    }

    Điểm hay của phương pháp này là nó hoạt động với các phần tử không có chiều cao nhất định, nhưng trong một số trường hợp, việc sử dụng nó bị cản trở bởi thực tế là khối bên ngoài, giống như bất kỳ ô nào trong bảng, điều chỉnh độ rộng của nó cho phù hợp với nội dung của nó và bạn có thể kéo dài nó chỉ bằng cách thiết lập rõ ràng chiều rộng cho chiều rộng. Đối với một ô không có bảng, tỷ lệ phần trăm không hoạt động đầy đủ.

    Thiếu sót này được khắc phục bằng cách gói ô trong ô mẹ của nó bằng thuộc tính display:table. Kích thước của phần tử này có thể được đặt dưới dạng phần trăm. Mã cuối cùng sẽ trông như thế này:

    Bao bọc bên ngoài (
    hiển thị: bảng;
    }

    Thùng đựng hàng (
    hiển thị: ô bảng;
    căn dọc: giữa;
    }





    Vị trí: biên độ tuyệt đối + âm

    Phương thức này được sử dụng khi biết chiều cao của phần tử bên trong. Nó có thể không được biết đến bởi đơn vị bên ngoài. Cha mẹ được định vị tương đối và đứa trẻ bên trong nó được định vị tuyệt đối.

    Giá trị thuộc tính top là 50% làm cho phần tử lồng nhau được định vị với cạnh trên của nó ở giữa khối bên ngoài. Tất cả những gì còn lại là nâng phần lề âm của nó lên một nửa chiều cao của chính nó để nó đứng chính xác ở giữa của chiều dọc.

    Thùng đựng hàng (
    vị trí: tương đối;
    }

    Bên trong (
    chiều cao: 140px;
    vị trí: tuyệt đối;
    trên cùng: 50%;
    lề trên: -70px;
    }

    Nhược điểm của phương pháp này là cần biết chiều cao của trẻ.

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

    Việc căn chỉnh các phần tử nội tuyến và khối nội tuyến, bao gồm hình ảnh và biểu tượng, trong văn bản xung quanh được thực hiện bằng thuộc tính căn chỉnh dọc. Không giống như bảng, trong trường hợp này toàn bộ tập hợp các giá trị được chỉ định trong đặc tả sẽ hoạt động.

    Nếu biết chiều cao của phần tử gốc, thuộc tính này có thể được sử dụng để căn giữa văn bản nhiều dòng.

    Đối với khối bên ngoài quy định căn giữa một đường.

    Thùng đựng hàng (
    chiều cao: 140px;
    chiều cao dòng: 140px;
    }

    Giá trị chiều cao dòng cho khối bên trong được xác định lại thành giá trị bình thường hoặc bất kỳ giá trị mong muốn nào. Nó cũng được cung cấp căn chỉnh dọc-align: middle và chuyển đổi thành loại khối nội tuyến - display: inline-block.

    Bên trong (
    hiển thị: khối nội tuyến;
    chiều cao dòng: bình thường;
    căn dọc: giữa;
    }

    Nhược điểm của phương pháp này là bạn cần biết chiều cao của cha mẹ.

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

    Hàm dịch Y của thuộc tính biến đổi cho phép bạn căn giữa khối bên trong có chiều cao không xác định. Để làm được điều này, cha mẹ phải được định vị tương đối và con tuyệt đối.

    Thuộc tính top có giá trị 50% sẽ hạ thấp khối bên trong sao cho cạnh trên của nó được đặt ở giữa khối mẹ của nó. Giá trị dịchY: -50% nâng phần tử lên một nửa chiều cao của chính nó và do đó căn chỉnh tâm dọc của các khối.

    Thùng đựng hàng (
    vị trí: tương đối;
    }

    Bên trong (
    vị trí: tuyệt đối;
    trên cùng: 50%;
    biến đổi: dịchY(-50%);
    }

    Nhược điểm của kỹ thuật này là khả năng hỗ trợ hạn chế cho các chức năng chuyển đổi trong trình duyệt IE.

    Căn chỉnh thông qua phần tử giả

    Phương thức này hoạt động khi không xác định được chiều cao của khối thứ nhất và khối thứ hai. Phần tử giả khối nội tuyến được thêm vào bên trong phần tử gốc bằng cách sử dụng trước hoặc sau. Chiều cao của phần tử được thêm vào phải bằng chiều cao của phần tử gốc - chiều cao: 100%. Căn chỉnh theo chiều dọc của nội dung được đặt bằng cách sử dụng Vertical-align: middle.

    Sử dụng căn chỉnh dọc: giữa, khối bên trong được căn chỉnh tương ứng với phần tử giả này. Vì phần tử cha và phần tử con có cùng chiều cao nên phần tử bên trong tuy được căn chỉnh theo chiều dọc với phần tử giả nhưng cũng được căn giữa với hộp bên ngoài.

    Vùng chứa: trước (
    nội dung: "";
    chiều cao: 100%;
    căn dọc: giữa;
    hiển thị: khối nội tuyến;
    }

    Bên trong (
    hiển thị: khối nội tuyến;
    căn dọc: giữa;
    }

    Cách phổ quát. Không hoạt động nếu dàn lạnh được đặt ở vị trí tuyệt đối.

    Flexbox

    Cách mới nhất và dễ dàng nhất để căn chỉnh các phần tử theo chiều dọc. Flexbox cho phép bạn sắp xếp các thành phần của trang Web theo ý muốn. Để căn giữa một khối, bạn chỉ cần đặt display: flex cho khối cha và lề: auto cho khối con.

    Thùng đựng hàng (
    hiển thị: linh hoạt;
    chiều rộng: 320px;
    chiều cao: 140px;
    }

    Bên trong (
    chiều rộng: 120px;
    lề: tự động;
    }

    Flexbox chỉ hoạt động trong các trình duyệt hiện đại.

    Lựa chọn một phương pháp

    Việc sử dụng kỹ thuật căn chỉnh dọc nào sẽ tùy thuộc vào nhiệm vụ và những hạn chế có thể xuất hiện trong bất kỳ trường hợp cụ thể nào.

    Chiều cao của các phần tử không xác định

    Trong tình huống này, bạn có thể sử dụng một trong bốn phương pháp phổ biến:

    1. Bảng. Cha mẹ trở thành một ô bảng được tạo bằng HTML hoặc thông qua bảng hiển thị/ô hiển thị. Phần tử cha này được cung cấp theo chiều dọc: giữa.

    2. Phần tử giả. Đối với khối bên ngoài, phần tử giả khối nội tuyến được tạo với chiều rộng=100% và căn chỉnh dọc: giữa. Đứa trẻ được hiển thị: khối nội tuyến và căn chỉnh dọc: giữa. Phương pháp này không chỉ hoạt động khi khối bên trong được định vị tuyệt đối.

    3. Biến đổi. Cha mẹ nhận được vị trí: tương đối. Đứa trẻ được cho vị trí: tuyệt đối, trên cùng: 50% và biến đổi: dịchY(-50%);

    4. Hộp linh hoạt. Khối bên ngoài được đặt thành display: flex, khối bên trong được đặt thành lề: auto.

    Chỉ có chiều cao của đứa trẻ được biết

    Bộ phận bên ngoài được định vị tương đối; Phần tử bên trong được định vị tuyệt đối, trên cùng: 50% và lề trên bằng một nửa chiều cao của nó.

    Một dòng trên mỗi khối với chiều cao đã biết

    Khối bên ngoài được cấp một thuộc tính chiều cao dòng có giá trị bằng chiều cao của nó.

    Chiều cao của khối bên ngoài được biết nhưng phần tử bên trong thì không.

    Phần cha mẹ được cấp một chiều cao dòng bằng với chiều cao của nó. Chiều cao dòng của trẻ được xác định lại thành giá trị bình thường hoặc bất kỳ giá trị mong muốn nào và hiển thị: khối nội tuyến và căn chỉnh dọc: giữa được cấp cho nó.

    Khi bố cục một trang, thường phải thực hiện căn chỉnh giữa bằng phương pháp CSS: ví dụ: căn giữa khối chính. Có một số tùy chọn để giải quyết vấn đề này, mỗi tùy chọn sớm hay muộn đều phải được sử dụng bởi bất kỳ nhà thiết kế bố cục nào.

    Căn chỉnh văn bản ở giữa

    Thông thường, với mục đích trang trí, cần phải đặt văn bản ở vị trí căn giữa; CSS trong trường hợp này cho phép bạn giảm thời gian bố cục. Trước đây, việc này được thực hiện bằng cách sử dụng các thuộc tính HTML, nhưng giờ đây tiêu chuẩn yêu cầu văn bản phải được căn chỉnh bằng các biểu định kiểu. Không giống như các khối mà bạn cần thay đổi lề, trong CSS, việc căn giữa văn bản được thực hiện bằng một dòng duy nhất:

    • căn chỉnh văn bản:giữa;

    Tài sản này được thừa kế và truyền lại từ cha mẹ cho tất cả con cháu. Không chỉ ảnh hưởng đến văn bản mà còn ảnh hưởng đến các yếu tố khác. Để làm điều này, chúng phải ở dạng nội tuyến (ví dụ: span) hoặc khối nội tuyến (bất kỳ khối nào có thuộc tính display: block được đặt). Tùy chọn thứ hai cũng cho phép bạn thay đổi chiều rộng và chiều cao của phần tử và điều chỉnh mức thụt lề linh hoạt hơn.

    Thông thường trên các trang, căn chỉnh được gán cho chính thẻ đó. Điều này ngay lập tức làm mất hiệu lực mã vì W3C đã không dùng thuộc tính căn chỉnh nữa. Sử dụng nó trên một trang không được khuyến khích.

    Căn chỉnh một khối vào trung tâm

    Nếu bạn cần căn giữa một div, CSS cung cấp một cách khá thuận tiện: sử dụng lề. Thụt lề có thể được đặt cho cả phần tử khối và phần tử khối nội tuyến. Giá trị thuộc tính phải là 0 (đệm dọc) và auto (đệm ngang tự động):

    • lề:0 tự động;

    Bây giờ tùy chọn này được công nhận là hoàn toàn hợp lệ. Việc sử dụng phần đệm bên ngoài cũng cho phép bạn đặt hình ảnh ở giữa: nó cho phép bạn giải quyết nhiều vấn đề liên quan đến vị trí của một thành phần trên trang.

    Căn chỉnh khối sang trái hoặc phải

    Đôi khi không cần căn chỉnh trung tâm CSS, nhưng bạn cần đặt hai khối cạnh nhau: một khối ở cạnh trái, khối kia ở bên phải. Với mục đích này, có một thuộc tính float, có thể nhận một trong ba giá trị: trái, phải hoặc không. Giả sử bạn có hai khối cần được đặt cạnh nhau. Sau đó, mã sẽ như thế này:

    • .left (float:left;)
    • .right(float:right)

    Nếu cũng có khối thứ ba, khối này phải nằm dưới hai khối đầu tiên (ví dụ: chân trang), thì nó cần được cung cấp thuộc tính clear:

    • .left (float:left;)
    • .right(float:right)
    • chân trang (rõ ràng: cả hai)

    Thực tế là các khối có các lớp trái và phải nằm ngoài luồng chung, nghĩa là tất cả các phần tử khác đều bỏ qua sự tồn tại của các phần tử được căn chỉnh. Thuộc tính clear:both cho phép chân trang hoặc bất kỳ khối nào khác nhìn thấy các phần tử đã rơi ra khỏi luồng và cấm thả nổi ở cả bên trái và bên phải. Do đó, trong ví dụ của chúng tôi, phần chân trang sẽ di chuyển xuống.

    Căn dọc

    Đôi khi việc căn chỉnh tâm bằng các phương pháp CSS là không đủ, bạn cũng cần thay đổi vị trí dọc của khối con. Bất kỳ phần tử khối nội tuyến hoặc khối nội tuyến nào cũng có thể được lồng ở cạnh trên hoặc dưới, ở giữa phần tử cha hoặc ở bất kỳ vị trí nào. Thông thường, khối cần được căn chỉnh về giữa; đối với điều này, thuộc tính căn chỉnh dọc được sử dụng. Giả sử có hai khối, một khối lồng vào nhau. Trong trường hợp này, khối bên trong là phần tử khối nội tuyến (hiển thị: khối nội tuyến). Bạn cần căn chỉnh khối con theo chiều dọc:

    • căn chỉnh trên cùng - .child(vertical-align:top);
    • căn giữa - .child(vertical-align:middle);
    • căn lề dưới - .child(vertical-align:bottom);

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

    Các vấn đề có thể xảy ra với các khối được căn chỉnh

    Đôi khi việc căn giữa một div bằng CSS có thể gây ra một chút rắc rối. Ví dụ: khi sử dụng float: giả sử có ba khối: .first, .second và .third. Khối thứ hai và thứ ba nằm ở khối thứ nhất. Phần tử có lớp thứ hai được căn trái và khối cuối cùng được căn phải. Sau khi chững lại, cả hai đều rơi ra khỏi dòng chảy. Nếu phần tử cha không được đặt chiều cao (ví dụ: 30em), thì nó sẽ không còn kéo dài theo chiều cao của các khối con của nó nữa. Để tránh lỗi này, hãy sử dụng “spacer” - một khối đặc biệt nhìn thấy .second và .third. Mã CSS:

    • .second(float:left)
    • .third(float:right)
    • .clearfix(height:0; clear: cả hai;)

    Lớp giả:after thường được sử dụng, điều này cũng cho phép bạn trả các khối về vị trí của chúng bằng cách tạo một miếng đệm giả (trong ví dụ, một div có lớp chứa nằm bên trong.first và chứa.left và.right) :

    • .left(float:left)
    • .right(float:right)
    • .container:after(content:""; display:table; clear:both;)

    Các tùy chọn trên là phổ biến nhất, mặc dù có một số biến thể. Bạn luôn có thể tìm ra cách đơn giản và thuận tiện nhất để tạo một miếng đệm giả thông qua thử nghiệm.

    Một vấn đề khác mà các nhà thiết kế bố cục thường gặp phải là việc căn chỉnh các phần tử khối nội tuyến. Một khoảng trống sẽ tự động được thêm vào sau mỗi khoảng trống. Thuộc tính lề, được đặt thành thụt lề âm, sẽ giúp giải quyết vấn đề này. Có các phương pháp khác được sử dụng ít thường xuyên hơn: ví dụ: về 0. Trong trường hợp này, cỡ chữ: 0 được ghi trong thuộc tính của phần tử cha. Nếu có văn bản bên trong các khối thì kích thước phông chữ được yêu cầu đã được trả về trong thuộc tính của các phần tử khối nội tuyến. Ví dụ: cỡ chữ: 1em. Phương pháp này không phải lúc nào cũng thuận tiện, vì vậy tùy chọn thụt lề bên ngoài thường được sử dụng nhiều hơn.

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