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

CSS định tâm theo chiều ngang. Căn chỉnh theo chiều ngang. Định vị tuyệt đối và lề âm

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 làm một bài viết với những cách khác tập trung để mọi thứ đều ở trong tầm tay ở 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. Đặt vị trí: liên quan đến khối cha để định vị tương đối với nó, căn giữa yếu tố 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 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

Vì 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 nó 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 khi Trợ giúp 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 ngang, mà còn cho 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 tạo các khối div, bạn có thể gặp phải các tình huống cần căn giữa div theo chiều ngang và chiều dọc bằng cách sử dụng CSS thuần túy. Ví dụ: khi tạo cửa sổ bật lên bằng . Có một số cách để triển khai căn giữa và trong bài viết này, tôi sẽ chia sẻ những cách yêu thích và dễ dàng nhất của tôi, sử dụng CSS hoặc jQuery.

Đầu tiên, những điều cơ bản:

Căn giữa theo chiều ngang trong CSS

Điều này rất dễ thực hiện, chúng tôi sử dụng lề cho chúng ta div khối.

ClassName(lề:0 tự động; chiều rộng:200px; chiều cao:200px; )

Để căn giữa khối div chỉ theo chiều ngang, bạn cần xác định độ rộng của khối (width), sử dụng thuộc tính auto cho lề trái và lề phải. Phương pháp này sẽ hoạt động với tất cả các phần tử khối (div, p, h1, v.v.). Để áp dụng căn giữa theo chiều ngang cho các phần tử nội tuyến (liên kết, hình ảnh ...), bạn cần áp dụng display: block;

Căn giữa theo chiều ngang và chiều dọc trong CSS

Căn giữa một div chặn theo chiều ngang và chiều dọc cùng một lúc, phức tạp hơn một chút. Bạn cần biết trước kích thước của khối div.

ClassName( chiều rộng: 300px; chiều cao: 200px; vị trí: tuyệt đối; bên trái: 50%; trên cùng: 50%; lề: -100px 0 0 -150px; )

Bằng cách sử dụng vị trí tuyệt đối của một khối, chúng ta có thể tách nó khỏi các phần tử xung quanh và xác định vị trí của nó so với kích thước của cửa sổ trình duyệt. Di chuyển khối div 50% sang bên trái và trên cùng của cửa sổ. Góc trên cùng bên trái của khối hiện nằm ở giữa cửa sổ trình duyệt. Tất cả những gì còn lại là đặt khối div vào giữa trang bằng cách di chuyển nó một nửa chiều rộng sang trái và một nửa chiều cao lên trên. Hoan hô! Kết quả là sự định tâm tuyệt vời của khối trên css thuần túy mã số.

Định tâm theo chiều ngang và chiều dọc với jQuery

Như đã đề cập trước đây - phương pháp CSSđịnh tâm chỉ hoạt động với kích thước cố định. Nếu kích thước không được xác định, phương thức jQuery sẽ được giải cứu:

$(window).resize(function())( $(".className").css(( location:"absolute", left: ($(window).width() - $(".className").outerWidth ( ))/2, top: ($(window).height() - $(".className").outerHeight())/2 )); )); // Để chạy một hàm khi cửa sổ được tải: $(window).resize();

Hoạt động của phương pháp này là chạy hàm thay đổi kích thước() bằng cách sử dụng dòng $(window).resize() . Chức năng này hoạt động bất cứ khi nào cửa sổ trình duyệt được thay đổi kích thước. Chúng tôi sử dụng externalWidth() và externalHeight() vì, không giống như width() và Height(), chúng bao gồm phần đệm và độ dày của đường viền theo kích thước mà chúng trả về. Dòng cuối cùng, bắt đầu quá trình căn giữa khối div khi tải trang.

Ưu điểm của việc sử dụng phương pháp này là bạn có thể không biết kích thước của div. Nhược điểm chính– điều này chỉ hoạt động khi bật JavaScript. Vì vậy, phương pháp này được chấp nhận đối với các giao diện đa chức năng như VKontakte, Facebook, v.v.

Như thường lệ, bạn có thể đề xuất phương pháp căn giữa khối yêu thích của mình bằng cách nhận xét.

Căn giữa các phần tử theo chiều dọc bằng CSS là một nhiệm vụ gây khó khăn cho các nhà phát triển. Tuy nhiên, có một số phương pháp để giải quyết nó khá đơn giản. TRONG bài học này 6 lựa chọn được đưa ra định tâm dọc nội dung.

Hãy bắt đầu với mô tả chung nhiệm vụ.

Vấn đề định tâm dọc

Định tâm theo chiều ngang rất đơn giản và dễ dàng. Khi phần tử ở giữa là nội tuyến, chúng ta sử dụng thuộc tính căn chỉnh tương ứng với phần tử cha. Khi phần tử ở cấp khối, chúng tôi đặt chiều rộng của nó và cài đặt tự động lề trái và lề phải.

Hầu hết mọi người sử dụng thuộc tính căn chỉnh văn bản: , truy cập thuộc tính Vertical-align để căn giữa theo chiều dọc. Mọi thứ trông khá logic. Nếu bạn đã sử dụng các mẫu bảng, có thể bạn đã sử dụng rộng rãi thuộc tính valign, điều này củng cố niềm tin rằng căn chỉnh dọc là cách đúng đắn để giải quyết vấn đề.

Nhưng thuộc tính valign chỉ hoạt động trên các ô của bảng. Và thuộc tính căn chỉnh dọc rất giống với nó. Nó cũng ảnh hưởng đến các ô của bảng và một số thành phần nội tuyến.

Giá trị của thuộc tính căn chỉnh dọc có liên quan đến phần tử nội tuyến gốc.

  • Trong một dòng văn bản, căn chỉnh tương ứng với chiều cao của dòng.
  • Ô trong bảng sử dụng căn chỉnh tương ứng với giá trị đang được tính toán thuật toán đặc biệt(thường là chiều cao của dòng).

Nhưng thật không may, thuộc tính căn chỉnh dọc không hoạt động trên các phần tử cấp khối (ví dụ: các đoạn văn bên trong phần tử div). Tình huống này có thể khiến người ta nghĩ rằng không có giải pháp nào cho vấn đề căn chỉnh theo chiều dọc.

Nhưng có các phương pháp khác để căn giữa các phần tử khối, việc lựa chọn phương pháp này phụ thuộc vào những gì đang được căn giữa so với vùng chứa bên ngoài.

Phương pháp chiều cao dòng

Phương pháp này hoạt động khi bạn muốn căn giữa một dòng văn bản theo chiều dọc. Tất cả những gì bạn phải làm là đặt chiều cao của dòng lớn hơn cỡ chữ.

Theo mặc định, khoảng trắng sẽ được phân bổ đều ở đầu và cuối văn bản. Và dòng sẽ được căn giữa theo chiều dọc. Thông thường chiều cao của dòng được thực hiện chiều cao bằng nhau yếu tố .

HTML:

Văn bản bắt buộc

CSS:

#child ( chiều cao dòng: 200px; )

Phương pháp này hoạt động trên tất cả các trình duyệt, mặc dù nó chỉ có thể được sử dụng cho một dòng. Giá trị 200 px trong ví dụ được chọn tùy ý. Bất kỳ giá trị nào cũng có thể được sử dụng kích thước lớn hơn Phông chữ văn bản.

Căn giữa hình ảnh bằng chiều cao dòng

Nếu nội dung là hình ảnh thì sao? Phương pháp trên có hiệu quả không? Câu trả lời nằm ở một dòng mã CSS nữa.

HTML:

CSS:

#parent ( chiều cao dòng: 200px; ) #parent img ( căn chỉnh dọc: giữa; )

Giá trị của thuộc tính line-height phải lớn hơn chiều cao của hình ảnh.

Phương pháp bảng CSS

Ở trên đã đề cập rằng thuộc tính căn chỉnh dọc được sử dụng cho các ô của bảng, nơi nó hoạt động rất tốt. Chúng ta có thể hiển thị phần tử của mình dưới dạng ô bảng và sử dụng thuộc tính căn chỉnh dọc trên đó để căn giữa nội dung theo chiều dọc.

Ghi chú: bảng CSS không giống như một bảng HTML.

HTML:

Nội dung

CSS:

#parent (hiển thị: bảng;) #child ( hiển thị: ô bảng; căn dọc: giữa; )

Chúng tôi đặt đầu ra của bảng thành phần tử div cha và xuất phần tử div lồng nhau dưới dạng ô bảng. Bây giờ bạn có thể sử dụng thuộc tính căn chỉnh dọc trên vùng chứa bên trong. Mọi thứ trong đó sẽ được căn giữa theo chiều dọc.

Không giống như phương pháp được mô tả ở trên, trong trong trường hợp này nội dung có thể động vì phần tử div sẽ thay đổi kích thước theo nội dung của nó.

Nhược điểm của phương pháp này là nó không hoạt động trong các phiên bản IE cũ hơn. Bạn phải sử dụng thuộc tính display: inline-block cho vùng chứa lồng nhau.

Định vị tuyệt đối và lợi nhuận âm

Phương pháp này cũng hoạt động trong tất cả các trình duyệt. Nhưng nó yêu cầu phần tử được căn giữa phải có chiều cao.

Mã ví dụ thực hiện định tâm theo chiều ngang và chiều dọc cùng một lúc:

HTML:

Nội dung

CSS:

#parent (vị trí: tương đối;) #child ( vị trí: tuyệt đối; trên cùng: 50%; bên trái: 50%; chiều cao: 30%; chiều rộng: 50%; lề: -15% 0 0 -25%; )

Đầu tiên, chúng ta đặt loại định vị phần tử. Tiếp theo, chúng tôi đặt thuộc tính top và left của phần tử div lồng nhau thành 50%, tương ứng với tâm của phần tử cha. Nhưng cái bên trái sẽ vào giữa góc trên cùng phần tử lồng nhau. Do đó, bạn cần nâng nó lên (một nửa chiều cao) và di chuyển nó sang trái (một nửa chiều rộng), khi đó tâm sẽ trùng với tâm của phần tử gốc. Vì vậy việc biết chiều cao của phần tử trong trường hợp này là cần thiết. Sau đó, chúng ta đặt phần tử có lề trên và trái âm tương ứng bằng một nửa chiều cao và chiều rộng.

Phương pháp này không hoạt động trong tất cả các trình duyệt.

Định vị và kéo dài tuyệt đối

Mã ví dụ thực hiện định tâm theo chiều dọc và chiều ngang.

HTML:

Nội dung

CSS:

#parent (vị trí: tương đối;) #child ( vị trí: tuyệt đối; trên cùng: 0; dưới cùng: 0; trái: 0; phải: 0; chiều rộng: 50%; chiều cao: 30%; lề: tự động; )

Ý tưởng đằng sau phương pháp này là kéo dài phần tử lồng nhau đến cả 4 đường viền của phần tử cha bằng cách đặt các thuộc tính trên, dưới, phải và trái về 0.

Đặt lề để tự động tạo trên tất cả các cạnh sẽ đặt các giá trị bằng nhau ở cả 4 cạnh và căn giữa phần tử div lồng nhau của chúng ta trên phần tử gốc của nó.

Thật không may, phương pháp này không hoạt động trong IE7 trở xuống.

Không gian bên trên và bên dưới bằng nhau

Trong phương pháp này, phần đệm bằng nhau được đặt rõ ràng ở trên và dưới phần tử cha.

HTML:

Nội dung

CSS:

#parent ( đệm: 5% 0; ) #child ( đệm: 10% 0; )

Trong mã CSS mẫu Lề trên và dưới được đặt cho cả hai phần tử. Đối với phần tử lồng nhau, việc đặt phần đệm sẽ giúp căn giữa phần tử đó theo chiều dọc. Và phần đệm của phần tử cha sẽ căn giữa phần tử lồng nhau bên trong nó.

Vì thay đổi năng động kích thước phần tử được sử dụng đơn vị tương đốiđo. Và đối với các đơn vị đo lường tuyệt đối, bạn sẽ phải thực hiện các phép tính.

Ví dụ: nếu phần tử cha có chiều cao 400px và phần tử lồng nhau là 100px thì cần có khoảng đệm 150px ở trên cùng và dưới cùng.

150 + 150 + 100 = 400

Việc sử dụng % cho phép bạn để lại các phép tính cho trình duyệt.

Phương pháp này hoạt động ở mọi nơi. Nhược điểm là sự cần thiết phải tính toán.

Lưu ý: Phương pháp này hoạt động bằng cách cài đặt lề yếu tố. Bạn cũng có thể sử dụng lề trong một phần tử. Việc quyết định sử dụng lề hay phần đệm phải được đưa ra tùy thuộc vào đặc thù của dự án.

div nổi

Phương thức này sử dụng phần tử div trống nổi và giúp kiểm soát vị trí của phần tử lồng nhau trong tài liệu. Lưu ý rằng div nổi được đặt trước phần tử lồng nhau của chúng ta trong mã HTML.

HTML:

Nội dung

CSS:

#parent (chiều cao: 250px;) #floater ( float: trái; chiều cao: 50%; chiều rộng: 100%; lề dưới: -50px; ) #child ( clear: cả hai; chiều cao: 100px; )

Chúng tôi dịch chuyển div trống sang trái hoặc phải và đặt chiều cao của nó thành 50% phần tử gốc của nó. Bằng cách này, nó sẽ lấp đầy nửa trên của phần tử gốc.

Vì div này nổi nên nó bị xóa khỏi luồng tài liệu thông thường và chúng ta cần mở văn bản trên phần tử lồng nhau. Ví dụ này sử dụng clear: cả hai , nhưng chỉ cần sử dụng cùng hướng với phần bù của phần tử div trống nổi là khá đủ.

Đường viền trên cùng của phần tử div lồng nhau nằm ngay bên dưới Giơi hạn dươi một phần tử div trống. Chúng ta cần di chuyển phần tử lồng nhau lên một nửa chiều cao của phần tử trống nổi. Để giải quyết vấn đề, hãy sử dụng giá trị thuộc tính lề dưới âm cho phần tử div trống nổi.

Phương pháp này cũng hoạt động trong tất cả các trình duyệt. Tuy nhiên, việc sử dụng nó đòi hỏi phải có thêm một phần tử div trống và kiến ​​thức về chiều cao của phần tử lồng nhau.

Phần kết luận

Tất cả các phương pháp được mô tả đều dễ sử dụng. Khó khăn là không có cái nào phù hợp cho mọi trường hợp. Bạn cần phân tích dự án và chọn dự án phù hợp cách tốt nhất theo yêu cầu.

Mọi nhà thiết kế bố cục đều thường xuyên phải đối mặt với nhu cầu căn chỉnh nội dung theo một khối: theo chiều ngang hoặc chiều dọc. Có một số bài viết hay về chủ đề này, nhưng tất cả chúng đều cung cấp nhiều lựa chọn thú vị nhưng ít thực tế, đó là lý do tại sao bạn phải dành thêm thời gian để nêu bật những điểm chính. Tôi quyết định trình bày thông tin này dưới một hình thức thuận tiện cho tôi để không phải tra google nữa.

Căn chỉnh các khối với kích thước đã biết

Cách dễ nhất để sử dụng CSS là căn chỉnh các khối có chiều cao đã biết (để căn chỉnh theo chiều dọc) hoặc chiều rộng (để căn chỉnh theo chiều ngang).

Căn chỉnh bằng cách sử dụng phần đệm

Đôi khi, bạn không thể căn giữa một phần tử mà phải thêm đường viền cho phần tử đó bằng thuộc tính "padding".

Ví dụ: có một hình ảnh 200 x 200 pixel và bạn cần căn giữa nó thành một khối 240 x 300. Chúng ta có thể đặt chiều cao và chiều rộng của khối bên ngoài = 200px và thêm 20 pixel ở trên cùng và dưới cùng , và 50 ở bên trái và bên phải.

.example-wrapper1 ( nền : #535E73 ; chiều rộng : 200px ; chiều cao : 200px ; phần đệm : 20px 50px ; ) Căn chỉnh các khối được định vị tuyệt đối

Nếu một khối được đặt thành "vị trí: tuyệt đối", thì khối đó có thể được định vị tương đối với khối cha gần nhất của nó bằng "vị trí: tương đối". Để làm điều này, bạn cần tất cả các thuộc tính ("top ","right","bottom","left") đơn vị trong nhà giao phó cùng giá trị, cũng như "lề: tự động".

*Có một sắc thái: Chiều rộng (chiều cao) của khối bên trong + giá trị bên trái (phải, dưới, trên) không được vượt quá kích thước của khối cha. Sẽ an toàn hơn khi gán 0 (không) cho các thuộc tính bên trái (phải, dưới, trên).

.example-wrapper2 ( vị trí : tương đối ; chiều cao : 250px ; nền : url(space.jpg) ; ) .cat-king ( chiều rộng : 200px ; chiều cao : 200px ; vị trí : tuyệt đối ; đỉnh : 0 ; trái : 0 ; đáy : 0 ; phải : 0 ; lề : auto ; nền : url(king.png) ; ) Căn chỉnh theo chiều ngang Căn chỉnh bằng cách sử dụng "text-align: center"

Để căn chỉnh văn bản trong một khối, có một thuộc tính đặc biệt là "text-align". Khi đặt thành "center", mỗi dòng văn bản sẽ được căn chỉnh theo chiều ngang. Đối với văn bản nhiều dòng, giải pháp này cực kỳ hiếm khi được sử dụng; tùy chọn này thường được tìm thấy để căn chỉnh các nhịp, liên kết hoặc hình ảnh.

Tôi đã từng phải nghĩ ra một số văn bản để chỉ ra cách căn chỉnh văn bản hoạt động bằng cách sử dụng CSS, nhưng tôi không nghĩ ra điều gì thú vị. Lúc đầu tôi quyết định sao chép nó ở đâu đó ươm vần, nhưng tôi nhớ rằng điều này có thể làm hỏng tính độc đáo của bài viết và những độc giả thân yêu của chúng tôi sẽ không thể tìm thấy nó trên Google. Và sau đó tôi quyết định viết đoạn này - suy cho cùng thì vấn đề không phải ở nó mà là sự thẳng hàng.

.example-text ( text-align : center ; phần đệm : 10px ; nền : #FF90B8 ; )

Điều đáng chú ý là thuộc tính này sẽ hoạt động không chỉ với văn bản mà còn với bất kỳ phần tử nội tuyến("Hiển thị nội dòng").

Tuy nhiên, văn bản này được căn chỉnh sang trái nhưng nằm trong một khối được căn giữa so với trình bao bọc.

.example-wrapper3 ( text-align : center ; nền : #FF90B8 ; ) .inline-text ( display : inline-block ; width : 40% ; đệm : 10px ; text-align : left ; nền : #FFE5E5 ; ) Căn chỉnh khối sử dụng lề

Các phần tử khối có chiều rộng đã biết có thể dễ dàng được căn chỉnh theo chiều ngang bằng cách đặt chúng thành "margin-left: auto; Margin-right: auto". Thông thường ký hiệu viết tắt được sử dụng: "margin: 0 auto" (bất kỳ giá trị nào cũng có thể được sử dụng thay vì 0). Nhưng phương pháp này không phù hợp với việc căn chỉnh theo chiều dọc.

.lama-wrapper ( chiều cao : 200px ; nền : #F1BF88 ; ) .lama1 ( chiều cao : 200px ; chiều rộng : 200px ; nền : url(lama.jpg) ; lề : 0 tự động ; )

Đây là cách bạn nên căn chỉnh tất cả các khối, nếu có thể (khi không yêu cầu định vị cố định hoặc tuyệt đối) - đó là cách hợp lý và đầy đủ nhất. Mặc dù điều này có vẻ hiển nhiên nhưng đôi khi tôi cũng thấy những ví dụ đáng sợ có dấu thụt âm, vì vậy tôi quyết định làm rõ.

Căn dọc

Với sự liên kết theo chiều dọc nhiều nhiều vấn đề hơn- rõ ràng là điều này không được cung cấp trong CSS. Có một số cách để đạt được kết quả mong muốn, nhưng tất cả chúng đều không đẹp lắm.

Căn chỉnh với thuộc tính chiều cao dòng

Trong trường hợp chỉ có một dòng trong một khối, bạn có thể căn chỉnh theo chiều dọc bằng cách sử dụng thuộc tính "line-height" và đặt nó ở độ cao mong muốn. Để đảm bảo an toàn, bạn cũng nên đặt “height”, giá trị của nó sẽ bằng giá trị của “line-height”, vì giá trị sau không được hỗ trợ trong tất cả các trình duyệt.

.example-wrapper4 ( line-height : 100px ; color : #DC09C0 ; Background : #E5DAE1 ; Height : 100px ; text-align : center ; )

Cũng có thể đạt được sự liên kết khối với một số dòng. Để làm điều này, bạn sẽ phải sử dụng một khối bao bọc bổ sung và đặt chiều cao dòng cho nó. Khối bên trong có thể có nhiều dòng nhưng phải là "nội tuyến". Bạn cần áp dụng "vertical-align: middle" cho nó.

.example-wrapper5 ( line-height : 160px ; chiều cao : 160px ; font-size : 0 ; nền : #FF9B00 ; ) .example-wrapper5 .text1 ( display : inline-block ; font-size : 14px ; line-height : 1.5 ; căn chỉnh dọc : giữa ; nền : #FFFFAF2 ; màu sắc : #FF9B00 ; căn chỉnh văn bản : giữa ; )

Khối trình bao bọc phải được đặt "font-size: 0". Nếu bạn không đặt cỡ chữ về 0, trình duyệt sẽ thêm một vài pixel phụ. Bạn cũng sẽ phải chỉ định kích thước phông chữ và chiều cao dòng cho khối bên trong, vì các thuộc tính này được kế thừa từ khối cha.

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

Thuộc tính "vertical-align" cũng ảnh hưởng đến các ô của bảng. C đặt giá trị"ở giữa", nội dung bên trong ô được căn chỉnh về giữa. Chắc chắn, cách bố trí bảng ngày nay được coi là cổ xưa, nhưng trong những trường hợp đặc biệt, nó có thể được mô phỏng bằng cách chỉ định "display: table-cell".

Tôi thường sử dụng tùy chọn này để căn chỉnh theo chiều dọc. Dưới đây là một ví dụ về bố cục được lấy từ một dự án đã hoàn thành. Hình ảnh được căn giữa theo chiều dọc theo cách này mới là điều đáng quan tâm.

.one_product .img_wrapper ( display : ô bảng ; chiều cao : 169px ; căn chỉnh dọc : giữa ; tràn : ẩn ; nền : #fff ; chiều rộng : 255px ; ) .one_product img ( chiều cao tối đa : 169px ; chiều rộng tối đa : 100 %; chiều rộng tối thiểu: 140px; hiển thị: khối; lề: 0 tự động; )

Cần nhớ rằng nếu một phần tử có tập "float" khác với "none", thì trong mọi trường hợp, nó sẽ là khối (hiển thị: khối) - khi đó bạn sẽ phải sử dụng một trình bao bọc khối bổ sung.

Căn chỉnh với phần tử nội tuyến bổ sung

Và đối với các phần tử nội tuyến, bạn có thể sử dụng "vertical-align: middle". Điều này sẽ căn chỉnh tất cả các phần tử có "display: inline" nằm trên cùng một đường so với đường trung tâm chung.

Bạn cần tạo một khối phụ có chiều cao bằng chiều cao của khối cha, sau đó khối mong muốn sẽ được căn giữa. Để làm điều này, thật thuận tiện khi sử dụng các phần tử giả:trước hoặc:sau.

.example-wrapper6 ( chiều cao : 300px ; căn chỉnh văn bản : giữa ; nền : #70DAF1 ; ) .pudge ( hiển thị : khối nội tuyến ; căn chỉnh dọc : giữa ; nền : url(pudge.png) ; màu nền : # fff ; chiều rộng : 200px ; chiều cao : 200px ; ) .riki ( hiển thị : khối nội tuyến ; chiều cao : 100% ; căn chỉnh dọc : giữa ; ) Hiển thị: flex và căn chỉnh

Nếu bạn không quan tâm nhiều đến người dùng Explorer 8 hoặc quan tâm đến mức sẵn sàng chèn thêm một đoạn javascript cho họ, thì bạn có thể sử dụng "display: flex". Hộp Flex rất hữu ích trong việc giải quyết các vấn đề căn chỉnh và chỉ cần viết "margin: auto" để căn giữa nội dung bên trong.

Cho đến nay, tôi thực tế chưa bao giờ gặp phải phương pháp này, nhưng không có hạn chế đặc biệt nào đối với nó.

.example-wrapper7 ( display : flex ; chiều cao : 300px ; nền : #AEB96A ; ) .example-wrapper7 img ( lề : auto ; )

Chà, đó là tất cả những gì tôi muốn viết về căn chỉnh CSS. Bây giờ việc căn giữa nội dung sẽ không còn là vấn đề nữa!

Nếu bạn cắt bất kỳ trang web nào được tạo trên dựa trên html, sau đó một cấu trúc từng lớp nhất định sẽ xuất hiện trước mặt bạn. Hơn nữa, với chính mình vẻ bề ngoài nó sẽ giống như bánh có tầng. Nếu bạn nghĩ như vậy thì rất có thể bạn đã lâu rồi chưa ăn gì. Vì vậy, trước tiên hãy thỏa mãn cơn đói của bạn, sau đó chúng tôi sẽ cho bạn biết cách sắp xếp lớp divở trung tâm trang web của bạn:

Ưu điểm của bố cục sử dụng thẻ

Có hai loại cấu trúc trang web chính:

  • Dạng bảng;
  • Khối.

Bố cục dạng bảng chiếm ưu thế ngay cả vào buổi bình minh của Internet. Ưu điểm của nó bao gồm độ chính xác của vị trí được chỉ định. Nhưng tuy nhiên, nó có những thiếu sót rõ ràng. Những cái chính là khối lượng mã và tốc độ thấp lượt tải xuống.

Khi sử dụng bố cục bảng, trang web sẽ không được hiển thị cho đến khi hết chỗ. Trong khi khi sử dụng khối phần tử divđược hiển thị ngay lập tức.

Ngoại trừ tốc độ cao khối tải của trang web cho phép bạn giảm âm lượng nhiều lần Mã HTML. Bao gồm thông qua việc sử dụng các lớp CSS.

Tuy nhiên, nên sử dụng bố cục dạng bảng để cấu trúc hiển thị dữ liệu trên trang. Một ví dụ điển hình về việc sử dụng nó là hiển thị các bảng.

Việc xây dựng khối dựa trên thẻ còn được gọi là từng lớp và bản thân các khối được gọi là lớp. Điều này là do thực tế là khi sử dụng giá trị nhất định thuộc tính, chúng có thể được đặt chồng lên nhau giống như các lớp trong Photoshop.

Hỗ trợ định vị

TRONG bố trí khối Tốt hơn là định vị các lớp bằng cách sử dụng các biểu định kiểu xếp tầng. Thuộc tính CSS chính chịu trách nhiệm bố cục là float.
Cú pháp thuộc tính:
phao: trái | đúng | không | thừa kế
Ở đâu:

  • left – căn chỉnh phần tử ở cạnh trái của màn hình. Dòng chảy xung quanh các phần tử còn lại xảy ra ở bên phải;
  • right – căn chỉnh ở bên phải, bao quanh các phần tử khác – ở bên trái;
  • không – không được phép gói;
  • kế thừa – kế thừa giá trị của phần tử cha.

Hãy xem một ví dụ đơn giản về định vị div bằng thuộc tính này:

#left ( chiều rộng: 200px; chiều cao: 100px; float: trái; nền: rgb(255,51,102); ) #right ( chiều rộng: 200px; chiều cao: 100px; float: phải; nền: rgb(0,255,153); ) Khối bên trái Khối bên phải


Bây giờ chúng ta sẽ cố gắng sử dụng thuộc tính tương tự để định vị div thứ ba ở giữa trang. Nhưng tiếc là float không có giá trị trung tâm. Và khi bạn cung cấp cho một khối mới một giá trị căn chỉnh sang phải hoặc trái, nó sẽ được dịch chuyển theo hướng đã chỉ định. Do đó, tất cả những gì còn lại là đặt float: left cho cả ba khối:


Nhưng đây không phải là sự lựa chọn tốt nhất. Khi cửa sổ giảm kích thước, tất cả các lớp được xếp thành một hàng theo chiều dọc và khi tăng kích thước, chúng dính vào cạnh trái của cửa sổ. Vì vậy, chúng ta cần một cách tốt hơn để căn giữa div.

Lớp định tâm

Trong ví dụ tiếp theo, chúng tôi sẽ sử dụng lớp chứa trong đó chúng tôi sẽ đặt các phần tử còn lại. Điều này giải quyết vấn đề các khối di chuyển tương đối với nhau khi kích thước cửa sổ thay đổi. Việc căn giữa vùng chứa ở giữa được thực hiện bằng cách sử dụng tác vụ thuộc tính lề giá trị 0 lề từ cạnh trên và auto ở hai bên (lề: 0 auto ):

#container ( chiều rộng: 600px; lề: 0 tự động; ) #left ( chiều rộng: 200px; chiều cao: 100px; float: trái; nền: rgb(255,51,102); ) #right ( chiều rộng: 200px; chiều cao: 100px; float : trái; nền: rgb(0,255,153); ) #center ( chiều rộng: 200px; chiều cao: 100px; float: trái; nền: rgb(255,0,0); ) Khối bên trái Khối trung tâm Khối bên phải


Ví dụ tương tự cho thấy cách bạn có thể căn giữa div theo chiều ngang. Và nếu bạn chỉnh sửa một chút đoạn mã trên, bạn có thể đạt được sự căn chỉnh theo chiều dọc của các khối. Để làm điều này, bạn chỉ cần thay đổi độ dài của lớp chứa (giảm nó). Nghĩa là, sau khi chỉnh sửa lớp css của nó sẽ trông như thế này:

Sau khi thay đổi, tất cả các khối sẽ xếp thẳng hàng ở giữa. Và vị trí của chúng sẽ không thay đổi bất kể kích thước cửa sổ trình duyệt. Đây là cách căn giữa theo chiều dọc của một div trông như thế nào:


Trong ví dụ sau, chúng tôi đã sử dụng một số thuộc tính css mới để căn giữa các lớp bên trong một vùng chứa:

#container ( chiều rộng: 450px; chiều cao: 150px; lề: 0 tự động; màu nền: #66CCFF; ) #left ( chiều rộng: 100px; chiều cao: 100px; nền: rgb(255,51,102); hiển thị: khối nội tuyến; căn chỉnh dọc: giữa; lề trái: 35px; ) #right ( chiều rộng: 100px; chiều cao: 100px; nền: rgb(0,255,153); hiển thị: khối nội tuyến; căn chỉnh dọc: giữa; lề trái: 35px; ) #center ( chiều rộng: 100px; chiều cao: 100px; nền: rgb(255,0,0); hiển thị: khối nội tuyến; căn chỉnh dọc: giữa; lề trái: 35px; )


Mô tả ngắn gọn về thuộc tính css và giá trị của chúng mà chúng tôi đã sử dụng trong trong ví dụ nàyđể căn giữa div bên trong div :

  • display: inline-block – căn chỉnh một phần tử khối thành một dòng và đảm bảo nó bao quanh một phần tử khác;
  • Vertical-align: middle – căn chỉnh phần tử ở giữa so với phần tử gốc;
  • lề trái – đặt lề trái.
Cách tạo liên kết từ một lớp

Nghe có vẻ kỳ lạ nhưng điều này là có thể. Đôi khi có thể cần một khối div làm liên kết trong quá trình bố trí nhiều loại khác nhau thực đơn. Hãy xem xét ví dụ thực tế thực hiện lớp liên kết:

#layer1( chiều rộng: 500px; chiều cao: 100px; nền: rgb(51,255,204); đường viền:groove; ) a ( display: block; căn chỉnh văn bản: giữa; chiều cao: 100%; màu: rgb(255,0,51) ;) Liên kết đến trang web của chúng tôi


Trong ví dụ này, sử dụng dòng display: block, chúng ta đặt giá trị của liên kết phần tử khối. Và sao cho toàn bộ chiều cao khối divđã trở thành một liên kết, đặt chiều cao: 100%.

Ẩn và hiển thị các phần tử khối

Các phần tử khối mang lại nhiều cơ hội hơn để mở rộng chức năng của giao diện so với bố cục dạng bảng đã lỗi thời. Điều thường xảy ra là thiết kế trang web là duy nhất và dễ nhận biết. Nhưng đối với sự độc quyền như vậy, bạn phải trả giá bằng việc thiếu không gian trống.

Đặc biệt nó liên quan trang chủ, chi phí quảng cáo trên đó là cao nhất. Vì vậy, vấn đề đặt ra là “xô” người khác vào đâu? biểu ngữ quảng cáo. Và ở đây bạn không thể tránh khỏi việc căn chỉnh div vào giữa trang!

Một giải pháp hợp lý hơn là ẩn đi một số khối. Đây là một ví dụ đơn giản về việc triển khai như vậy:

#layer1( display:block; chiều rộng: 500px; chiều cao: 100px; nền: rgb(51,255,204); border:groove; ) hàm show() ( if(layer1=="none") ( layer1="block"; ) else ( layer1="none"; ) document.getElementById("layer1").style.display=layer1; )

Đây là nút ma thuật. Nhấp vào nó sẽ ẩn hoặc hiển thị khối ẩn.


Trong ví dụ này vị trí div khối không hề thay đổi. Ở đây nó được sử dụng hàm đơn giản nhất Giá trị thay đổi JavaScript thuộc tính css hiển thị sau khi nhấn nút (sự kiện onclick).

cú pháp hiển thị:
hiển thị: khối | nội tuyến | khối nội tuyến | bảng nội tuyến | mục danh sách | không | chạy vào | bàn | chú thích bảng | ô bảng | bảng-cột-nhóm | cột bảng | nhóm-chân trang | nhóm tiêu đề bảng | hàng bảng | bảng-hàng-nhóm

Bạn có thể thấy, tài sản này có thể mang nhiều ý nghĩa. Vì vậy nó rất hữu ích và có thể được sử dụng để định vị các phần tử. Trong một trong những ví dụ trước, chúng tôi đã sử dụng một trong các giá trị của nó (inline-block ) để căn giữa một div trong div.

Chúng tôi đã sử dụng hai giá trị cho thuộc tính display để ẩn và hiển thị lớp.