Căn chỉnh chiều cao. Cách căn chỉnh văn bản trong HTML về giữa, chiều rộng và các cạnh của trang

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ó chiều rộng được chỉ định, 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%; )

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 ( chiều 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; ) )

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; trái: 0; lề: tự động; img ( max-width: 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ả trước 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 phần tử mẹ 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: ""; ) .block ( display: inline-block; khoảng trắng: bình thường; căn chỉnh dọc: giữa; căn chỉnh văn bản: trái ; img (hiển thị: khối; đường viền: không có; ) )

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: ""; ) .block ( display: khối nội tuyến; khoảng trắng: bình thường; căn chỉnh dọc: giữa; căn chỉnh văn bản: trái; img ( hiển thị: khối; đường viền: không có; ) )

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ù đắp 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 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:

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; )

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

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