Thực đơn
trang chủTrò chơi

Căn chỉnh các khối theo chiều cao css. Các phương pháp căn chỉnh trung tâm theo chiều dọc trong CSS

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

    Căn chỉnh văn bản theo chiều dọc trong CSS là một công việc khá khó khăn. Tôi đã thấy đủ người vật lộn với vấn đề này đến nỗi tôi liên tục tìm ra những lỗi "nghiêm trọng" khi nói đến thiết kế đáp ứng thực tế.

    Nhưng đừng lo: nếu bạn đang gặp khó khăn với việc căn chỉnh theo chiều dọc CSS thì bạn đã đến đúng nơi rồi.

    Hãy nói về thuộc tính căn chỉnh dọc CSS

    Khi mới bắt đầu làm việc trong lĩnh vực phát triển web, tôi gặp chút khó khăn với đặc tính này. Tôi nghĩ nó sẽ hoạt động giống như thuộc tính “căn chỉnh văn bản” cổ điển. Ôi, giá như mọi chuyện đơn giản như vậy...

    Thuộc tính CSS căn chỉnh theo chiều dọc hoạt động tốt với các bảng nhưng không hoạt động tốt với div hoặc các phần tử khác. Khi bạn sử dụng nó trên div, nó sẽ căn chỉnh phần tử tương ứng với các div khác chứ không căn chỉnh nội dung của nó. Trong trường hợp này, thuộc tính chỉ hoạt động với display: inline-block; .

    Xem ví dụ

    Chúng tôi muốn tập trung vào nội dung chứ không phải chính div!

    Bạn có hai lựa chọn. Nếu bạn chỉ có các phần tử div có văn bản thì bạn có thể sử dụng thuộc tính line-height. Điều này có nghĩa là bạn cần biết chiều cao của phần tử nhưng bạn không thể đặt nó. Bằng cách này, văn bản của bạn sẽ luôn ở giữa.

    Tuy nhiên, có một nhược điểm đối với phương pháp căn chỉnh theo chiều dọc CSS này. Nếu văn bản có nhiều dòng thì chiều cao của dòng sẽ được nhân với số dòng. Rất có thể, trong trường hợp này, bạn sẽ có một trang được bố cục quá tệ.

    Hãy xem ví dụ này

    Nếu nội dung bạn muốn căn giữa có nhiều hơn một dòng thì tốt hơn nên sử dụng div bảng. Bạn cũng có thể sử dụng bảng, nhưng điều này không đúng về mặt ngữ nghĩa. Nếu bạn cần nghỉ giải lao vì mục đích đáp ứng, tốt hơn nên sử dụng phần tử div.

    Để tính năng này hoạt động, phải có một vùng chứa chính có display: table và bên trong nó có số cột mong muốn mà bạn muốn căn giữa bằng cách sử dụng display: table-cell và Vertical-align: middle .

    Xem ví dụ

    Tại sao điều này hoạt động với đánh dấu bảng nhưng không hoạt động với các phần tử div? Vì các hàng trong bảng có cùng chiều cao. Khi nội dung của một ô trong bảng không sử dụng hết chiều cao có sẵn, trình duyệt sẽ tự động thêm khoảng đệm dọc để căn giữa nội dung.

    thuộc tính vị trí

    Hãy bắt đầu với những điều cơ bản về căn chỉnh dọc CSS div:

    • vị trí: tĩnh là mặc định. Phần tử được hiển thị theo thứ tự HTML;
    • vị trí: tuyệt đối - được sử dụng để xác định vị trí chính xác của một phần tử. Vị trí này luôn liên quan đến phần tử cha có vị trí tương đối gần nhất (không phải static ). Nếu không xác định chính xác vị trí của một phần tử, bạn sẽ mất quyền kiểm soát nó. Nó sẽ xuất hiện ngẫu nhiên, hoàn toàn bỏ qua dòng chảy của tài liệu. Theo mặc định, phần tử xuất hiện ở góc trên bên trái;
    • vị trí: tương đối - được sử dụng để định vị một phần tử so với vị trí bình thường của nó (tĩnh). Giá trị này giữ nguyên thứ tự luồng tài liệu;
    • vị trí: đã sửa - được sử dụng để định vị phần tử liên quan đến cửa sổ trình duyệt để nó luôn hiển thị trong chế độ xem.

    Lưu ý: Một số thuộc tính (top và z-index) chỉ hoạt động nếu phần tử được đặt thành vị trí (không phải static ).

    Hãy bắt tay vào công việc!

    Bạn có muốn triển khai căn chỉnh trung tâm theo chiều dọc CSS không? Đầu tiên tạo một phần tử có vị trí và kích thước tương đối. Ví dụ: 100% về chiều rộng và chiều cao.

    Bước thứ hai có thể khác nhau tùy thuộc vào trình duyệt mục tiêu, nhưng bạn có thể sử dụng một trong hai tùy chọn:

    • Thuộc tính cũ: cần biết chính xác kích thước của cửa sổ để loại bỏ một nửa chiều rộng và một nửa chiều cao. Nhìn vào ví dụ;
    • Thuộc tính CSS3 mới: bạn có thể thêm thuộc tính biến đổi với giá trị dịch là 50% và khối sẽ luôn ở giữa. Xem ví dụ.

    Về cơ bản, nếu bạn muốn căn giữa nội dung, đừng bao giờ sử dụng top: 40% hoặc left: 300px . Tính năng này hoạt động tốt trên màn hình thử nghiệm nhưng không được căn giữa.

    Ghi nhớ vị trí: cố định? Bạn có thể làm điều tương tự với nó như với vị trí tuyệt đối, nhưng bạn không cần vị trí tương đối cho phần tử gốc - nó sẽ luôn được định vị tương đối với cửa sổ trình duyệt.

    Bạn đã nghe nói về đặc tả flexbox chưa?

    Bạn có thể sử dụng flexbox. Điều này tốt hơn nhiều so với bất kỳ tùy chọn căn chỉnh văn bản trung tâm theo chiều dọc CSS nào khác. Với flexbox, việc quản lý các phần tử giống như trò chơi của trẻ con. Vấn đề là một số trình duyệt cần phải loại bỏ, chẳng hạn như IE9 và các phiên bản bên dưới. Dưới đây là ví dụ về cách căn giữa một khối theo chiều dọc:

    Xem ví dụ

    Bằng cách sử dụng bố cục flexbox, bạn có thể căn giữa nhiều khối.

    Nếu bạn áp dụng những gì đã học được từ những ví dụ này, bạn sẽ có thể thành thạo việc căn chỉnh khối dọc CSS ngay lập tức.

    Liên kết và đọc thêm

    Học đánh dấu CSS

    Ếch FlexBox

    Hộp cát Flexbox

    Bản dịch của bài viết “CSS Vertical Align for Everyone (Bao gồm cả người giả)” được nhóm dự án thân thiện chuẩn bị.

    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

    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ó width: div ( width: 300px; Margin: 0 auto; /*center 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*/ lề phải: -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 cung cấp 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; top: 0; phải: 0; đáy: 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%; )

    Vlad Merzhevich

    Do nội dung của các ô trong bảng có thể được căn chỉnh đồng thời theo chiều ngang và chiều dọc, nên khả năng kiểm soát vị trí của các phần tử so với nhau được mở rộng. Bảng cho phép bạn đặt căn chỉnh hình ảnh, văn bản, trường biểu mẫu và các thành phần khác có liên quan với nhau và toàn bộ trang web. Nhìn chung, việc căn chỉnh chủ yếu là cần thiết để thiết lập các kết nối trực quan giữa các yếu tố khác nhau cũng như để nhóm chúng lại với nhau.

    Định tâm dọc

    Một cách để cho khách truy cập thấy trọng tâm và tên của trang web là sử dụng trang giật gân. Đây là trang đầu tiên, theo quy định, có màn hình giật gân flash hoặc hình ảnh thể hiện ý chính của trang web. Hình ảnh cũng là một liên kết đến các phần khác của trang web. Bạn cần đặt hình ảnh này vào giữa cửa sổ trình duyệt, bất kể độ phân giải màn hình. Với mục đích này, bạn có thể sử dụng bảng có chiều rộng và chiều cao 100% (ví dụ 1).

    Ví dụ 1: Căn giữa bản vẽ

    BẢNG căn chỉnh ( chiều rộng: 100%; /* Chiều rộng bảng */ chiều cao: 100%; /* Chiều cao bảng */ )

    Trong ví dụ này, căn chỉnh theo chiều ngang được đặt bằng tham số thẻ Align="center" và nội dung của ô có thể không được căn giữa theo chiều dọc vì đây là vị trí mặc định.

    Để đặt chiều cao của bảng thành 100%, bạn cần xóa , mã sẽ không còn hiệu lực.

    Việc sử dụng chiều rộng và chiều cao để bao phủ toàn bộ khu vực có sẵn của trang web đảm bảo rằng nội dung của bảng sẽ được căn chỉnh chính xác ở giữa cửa sổ trình duyệt, bất kể kích thước của nó.

    Căn chỉnh theo chiều ngang

    Bằng cách kết hợp các thuộc tính căn chỉnh (căn chỉnh ngang) và valign (căn chỉnh dọc) của thẻ , cho phép đặt một số loại vị trí của các phần tử so với nhau. Trong bộ lễ phục. Hình 1 cho thấy các cách căn chỉnh các phần tử theo chiều ngang.

    Chúng ta hãy xem một số ví dụ về căn chỉnh văn bản theo hình bên dưới.

    Căn chỉnh trên cùng

    Để chỉ định căn chỉnh trên cùng của nội dung ô cho một thẻ bạn cần đặt thuộc tính valign với giá trị top (ví dụ 2).

    Ví dụ 2: Sử dụng valign

    Căn chỉnh

    Cột 1 Cột 2

    Trong ví dụ này, các đặc điểm của ô được kiểm soát bằng các tham số thẻ , nhưng cũng thuận tiện hơn khi thay đổi qua các kiểu. Đặc biệt, việc căn chỉnh trong ô được xác định bởi thuộc tính Vertical-align và text-align (ví dụ 3).

    Ví dụ 3: Áp dụng kiểu để căn chỉnh

    BẢNG căn chỉnh ( chiều rộng: 100%; /* Chiều rộng bảng */ ) #col1 ( chiều rộng: 75%; /* Chiều rộng cột đầu tiên */ nền: #f0f0f0; /* Màu nền của cột đầu tiên */ ) #col2 ( chiều rộng: 25 %; /* Chiều rộng của cột thứ hai */ nền: #fc5; /* Màu nền của cột thứ hai */ text-align: right; /* Căn phải */ ) #col1, #col2 ( Vertical-align: top ; / * Căn lề trên */ đệm: 5px; /* Lề xung quanh nội dung ô */ )

    Cột 1 Cột 2

    Để rút ngắn mã, ví dụ này sử dụng nhóm các bộ chọn vì thuộc tính căn dọc và đệm được áp dụng cho hai ô cùng một lúc.

    Căn chỉnh dưới cùng được thực hiện theo cách tương tự, nhưng thay vì giá trị trên cùng, đáy được sử dụng.

    Căn giữa

    Theo mặc định, nội dung ô được căn chỉnh về giữa đường thẳng đứng của chúng, vì vậy nếu các cột có độ cao khác nhau, bạn cần đặt căn chỉnh về cạnh trên. Đôi khi bạn vẫn cần phải để lại phương pháp căn chỉnh ban đầu, chẳng hạn như khi đặt công thức, như trong Hình. 2.

    Trong trường hợp này, công thức nằm ngay chính giữa cửa sổ trình duyệt và số của nó nằm ở cạnh phải. Để sắp xếp các phần tử theo cách này, bạn sẽ cần một bảng có ba ô. Các ô bên ngoài phải có cùng kích thước, ở ô giữa căn chỉnh được căn giữa và ở ô bên phải - dọc theo cạnh phải (ví dụ 4). Số lượng ô này là cần thiết để đảm bảo rằng công thức được đặt ở giữa.

    Ví dụ 4: Căn chỉnh công thức

    Căn chỉnh

    (18.6)

    Trong ví dụ này, ô đầu tiên của bảng được để trống; nó chỉ dùng để tạo thụt lề, nhân tiện, cũng có thể được đặt bằng cách sử dụng kiểu.

    Căn chỉnh các phần tử biểu mẫu

    Việc sử dụng bảng sẽ thuận tiện cho việc xác định vị trí của các trường biểu mẫu, đặc biệt khi chúng xen kẽ với văn bản. Một trong những tùy chọn thiết kế cho biểu mẫu dùng để nhập nhận xét được hiển thị trong Hình. 3.

    Để đảm bảo rằng văn bản bên cạnh các trường biểu mẫu được căn phải và bản thân các thành phần của biểu mẫu được căn trái, bạn sẽ cần một bảng có đường viền vô hình và hai cột. Cột bên trái sẽ chứa chính văn bản đó và cột bên phải sẽ chứa các trường văn bản (ví dụ 5).

    Ví dụ 5: Căn chỉnh các trường biểu mẫu

    Căn chỉnh

    Tên
    E-mail
    Một lời bình luận

    Trong ví dụ này, đối với những ô cần căn phải, thuộc tínhalign="right" sẽ được thêm vào. Để đảm bảo rằng nhãn Nhận xét được đặt ở đầu văn bản nhiều dòng, ô tương ứng được đặt thành căn chỉnh trên cùng bằng thuộc tính valign.