Thực đơn
trang chủKỹ thuật

Định tâm div. Cách tạo liên kết từ một lớp. Căn chỉnh với phần tử nội tuyến bổ sung

Có một số cách cơ bản khác nhau để căn giữa một đối tượng theo chiều dọc với sử dụng CSS tuy nhiên, khó khăn có thể nằm ở việc chọn đúng. Chúng tôi sẽ xem xét một số trong số chúng và cũng tạo một trang web nhỏ bằng cách sử dụng kiến ​​​​thức thu được.

Căn chỉnh trung tâm theo chiều dọc không dễ đạt được bằng CSS. Có nhiều cách và không phải tất cả đều hoạt động trong tất cả các trình duyệt. Chúng ta hãy nhìn vào 5 Các phương pháp khác nhau cũng như ưu nhược điểm của từng loại. Ví dụ.

phương pháp thứ nhất

Phương pháp này giả định rằng chúng tôi đặt một số phần tử

display dưới dạng bảng, sau đó chúng ta có thể sử dụng thuộc tính căn chỉnh dọc trong đó (hoạt động khác nhau ở các phần tử khác nhau).

Một số thông tin hữu ích cần được tập trung.
#wrapper( display: table; ) #cell( display: table-cell; Vertical-align: middle; )

thuận

  • Nội dung có thể thay đổi chiều cao một cách linh hoạt (chiều cao không được xác định trong CSS).
  • Nội dung không bị cắt nếu không đủ chỗ cho nó.

Nhược điểm

  • Không hoạt động trong IE 7 trở xuống
  • Rất nhiều thẻ lồng nhau

phương pháp thứ 2

Phương pháp này sử dụng vị trí tuyệt đối của div, với phần trên cùng được đặt thành 50% và phần lề trên trừ đi một nửa chiều cao nội dung. Điều này ngụ ý rằng đối tượng phải có chiều cao cố định, được xác định theo kiểu CSS.

Vì chiều cao được cố định nên bạn có thể đặt tràn: tự động; đối với div chứa nội dung, do đó, nếu nội dung không vừa, thanh cuộn sẽ xuất hiện.

Nội dung ở đây
#content ( vị trí: tuyệt đối; trên cùng: 50%; chiều cao: 240px; lề trên: -120px; /* trừ một nửa chiều cao */ )

thuận

  • Hoạt động trong tất cả các trình duyệt.
  • Không có sự lồng ghép không cần thiết.

Nhược điểm

  • Khi không đủ dung lượng, nội dung sẽ biến mất (ví dụ: div nằm bên trong nội dung và người dùng đã thu nhỏ cửa sổ, trong trường hợp đó thanh cuộn sẽ không xuất hiện.

phương pháp thứ 3

Trong phương pháp này, chúng tôi sẽ bọc div nội dung bằng một div khác. Hãy đặt chiều cao của nó thành 50% (chiều cao: 50%;) và lề dưới bằng một nửa chiều cao (lề dưới:-contentheight;). Nội dung sẽ xóa nổi và được căn giữa.

đây là nội dung
#floater( float: left; chiều cao: 50%; lề dưới: -120px; ) #content( xóa: cả hai; chiều cao: 240px; vị trí: tương đối; )

thuận

  • Hoạt động trong tất cả các trình duyệt.
  • Khi không đủ dung lượng (ví dụ khi thu nhỏ cửa sổ) nội dung không bị cắt, thanh cuộn sẽ xuất hiện.

Nhược điểm

  • Tôi chỉ có thể nghĩ đến một điều: một phần tử trống bổ sung đang được sử dụng.

phương pháp thứ 4.

Phương pháp này sử dụng thuộc tính vị trí: tuyệt đối; đối với div có kích thước cố định (chiều rộng và chiều cao). Sau đó, chúng tôi đặt tọa độ của nó top:0; đáy: 0; , nhưng vì nó có chiều cao cố định nên nó không thể kéo dài và căn thẳng vào tâm. Điều này rất giống với phương pháp nổi tiếng căn chỉnh ngang tập trung vào phần tử khối có chiều rộng cố định (lề: 0 tự động;).

Thông tin quan trọng.
#content(vị trí: tuyệt đối; trên cùng: 0; dưới cùng: 0; trái: 0; phải: 0; lề: tự động; chiều cao: 240px; chiều rộng: 70%; )

thuận

  • Rất đơn giản.

Nhược điểm

  • Không hoạt động ở trình duyệt web IE
  • Nội dung sẽ bị cắt mà không có thanh cuộn nếu không có đủ dung lượng trong vùng chứa.

phương pháp thứ 5

Sử dụng phương pháp này, bạn có thể căn giữa một dòng văn bản. Chúng ta chỉ cần đặt chiều cao văn bản (line-height) bằng chiều cao phần tử (height). Sau đó, dòng sẽ được hiển thị ở trung tâm.

Một dòng văn bản nào đó
#content( chiều cao: 100px; chiều cao dòng: 100px; )

thuận

  • Hoạt động trong tất cả các trình duyệt.
  • Không cắt văn bản nếu nó không phù hợp.

Nhược điểm

  • Chỉ hoạt động với văn bản (không hoạt động với các phần tử khối).
  • Nếu có nhiều hơn một dòng văn bản thì trông rất tệ.

Phương pháp này rất hữu ích cho các phần tử nhỏ, chẳng hạn như căn giữa văn bản trong một nút hoặc trường văn bản.

Bây giờ bạn biết làm thế nào để đạt được căn chỉnh theo chiều dọcở giữa, hãy tạo một trang web đơn giản mà cuối cùng sẽ trông như thế này:

Bước 1

Bắt đầu bằng đánh dấu ngữ nghĩa luôn là điều tốt. Trang của chúng ta sẽ có cấu trúc như sau:

  • #floater (để căn giữa nội dung)
  • #centered (yếu tố trung tâm)
    • #bên
      • #Logo
      • #nav (danh sách
      • #nội dung
    • #bottom (đối với bản quyền và tất cả những thứ đó)

    Hãy viết đánh dấu html sau:

    Một công ty tập trung

    Tiêu đề trang

    Tái thiết kế toàn diện hoạt động gia công phần mềm có giá trị gia tăng sau khi cộng tác và chia sẻ ý tưởng lấy quy trình làm trung tâm. Đơn giản hóa mạnh mẽ các thị trường ngách có tác động mạnh mẽ thông qua các mệnh lệnh được kích hoạt. Sự đổi mới cao cấp chiếm ưu thế toàn diện sau các kịch bản hấp dẫn. Tiếp cận lại một cách liền mạch các tiêu chuẩn cao về nguồn nhân lực bằng các sản phẩm được sản xuất hàng đầu. Cung cấp các lược đồ tuân thủ tiêu chuẩn một cách rõ ràng trước các cơn lốc mạnh mẽ. Thu thập lại một cách độc đáo tính sẵn sàng của web được tận dụng thông tin có sẵn.

    Tiêu đề 2

    Tận dụng hiệu quả tính sẵn sàng của web tùy chỉnh thay vì các quy trình do khách hàng hướng dẫn. Quyết đoán phát triển các mệnh lệnh đa nền tảng dựa trên các công nghệ chủ động. Trao quyền thuận tiện cho các siêu dịch vụ đa ngành mà không cần giao diện toàn doanh nghiệp. Hợp lý hóa một cách thuận tiện các lĩnh vực chủ đề chiến lược cạnh tranh với các thị trường điện tử tập trung. Cung cấp chất phát quang huỳnh quang cho các cộng đồng đẳng cấp thế giới đối với các thị trường giá trị gia tăng. Tái tạo lại các dịch vụ tổng thể một cách thích hợp trước khi có các dịch vụ điện tử mạnh mẽ.

    Thông báo bản quyền ở đây

    Bước 2

    Bây giờ chúng ta sẽ viết CSS đơn giản nhất để đặt các phần tử trên trang. Bạn nên lưu mã này vào tệp style.css. Chính vì điều này mà liên kết được viết trong tệp html.

    Html, nội dung ( lề: 0; phần đệm: 0; chiều cao: 100%; ) nội dung ( nền: url("page_bg.jpg") 50% 50% không lặp lại #FC3; họ phông chữ: Georgia, Times, serifs; ) #floater ( vị trí: tương đối; float: trái; chiều cao: 50%; lề dưới: -200px; chiều rộng: 1px; ) #centered ( vị trí: tương đối; xóa: trái; chiều cao: 400px; chiều rộng: 80%; tối đa -width: 800px; min-width: 400px; lề: 0 tự động; đường viền: 4px liền khối #666; ) #bottom ( vị trí: tuyệt đối; dưới cùng: 0; phải: 0; ) #nav ( vị trí: tuyệt đối; bên trái: 0 ; dưới cùng: 0; phần đệm: 20px; #content (vị trí: tuyệt đối; bên trái: 0; trên cùng: 0; dưới cùng: 0; tràn: tự động; phần đệm: 20px;

    Trước khi căn chỉnh trung tâm nội dung, chúng ta cần đặt chiều cao của nội dung và html thành 100%. Vì chiều cao được coi là không có nội bộ và lề(phần đệm và lề), sau đó chúng ta đặt chúng (phần đệm) thành 0 để không có thanh cuộn.

    Lề dưới cho phần tử "floater" bằng trừ một nửa chiều cao nội dung (400px), cụ thể là -200px ;

    Trang của bạn bây giờ trông giống như thế này:

    #chiều rộng phần tử ở giữa là 80%. Điều này làm cho trang web của chúng tôi thu hẹp hơn trên màn hình nhỏ và rộng hơn trên màn hình lớn hơn. hầu hết các trang web trông không đứng đắn trên màn hình rộng mới ở góc trên bên trái. Các thuộc tính chiều rộng tối thiểu và chiều rộng tối đa cũng giới hạn trang của chúng tôi để nó trông không quá rộng hoặc quá hẹp. Internet Explorer không hỗ trợ các thuộc tính này. Bạn cần đặt nó ở một chiều rộng cố định.

    Vì phần tử #centered có tập hợp vị trí:tương đối nên chúng ta có thể sử dụng vị trí tuyệt đối của các phần tử bên trong nó. Sau đó đặt tràn:tự động; cho phần tử #content để thanh cuộn xuất hiện nếu nội dung không vừa.

    Bước 3

    Điều cuối cùng chúng ta sẽ làm là thêm một số kiểu dáng để làm cho trang trông hấp dẫn hơn một chút. Hãy bắt đầu với thực đơn.

    #nav ul ( list-style: none; đệm: 0; lề: 20px 0 0 0; thụt lề văn bản: 0; ) #nav li ( đệm: 0; lề: 3px; ) #nav li a ( display: block; màu nền: #e8e8e8; lề: 0; viền dưới: 1px rắn: bên phải; nội dung: """; font-weight: đậm; float: right; lề: 0 2px 0 5px; f8f8f8; màu viền dưới : #777; ) #nav li a:hover::after ( lề: 0 0 0 7px; color: #f93; ) #nav li a:active ( đệm: 8px 7px 6px 7px; )

    Điều đầu tiên chúng tôi làm để làm cho menu trông đẹp hơn là loại bỏ các dấu đầu dòng bằng cách đặt thuộc tính list-style:none, đồng thời đặt phần đệm và phần đệm, vì chúng khác nhau rất nhiều theo mặc định trong các trình duyệt khác nhau.

    Xin lưu ý rằng sau đó chúng tôi đã chỉ định rằng các liên kết sẽ xuất hiện dưới dạng khối yếu tố. Bây giờ, khi được hiển thị, chúng được trải dài trên toàn bộ chiều rộng của phần tử chứa chúng.

    Khác điều thú vị, mà chúng tôi sử dụng cho menu là các lớp giả:trước và:sau. Chúng cho phép bạn thêm nội dung nào đó vào trước và sau một phần tử. Cái này cách tốt thêm biểu tượng hoặc ký hiệu như mũi tên ở cuối mỗi liên kết. Thủ thuật này không hoạt động trong Internet Explorer 7 trở xuống.

    Bước 4

    Và cuối cùng nhưng không kém phần quan trọng, chúng tôi sẽ thêm một số ốc vít vào thiết kế của mình để trông đẹp hơn nữa.

    #centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 ( họ phông chữ: Helvetica, Arial, sans- serif; font-weight: normal; color: #666; ) h1 ( color: #f93; border-bottom: 1px Solid #ddd; letter-spacing: -0,05em; font-weight: đậm; lề-top: 0; đệm-top: 0; ) #bottom ( đệm: 10px; cỡ chữ: 0,7em; màu: #f03; ) #logo ( cỡ chữ: 2em; căn chỉnh văn bản: giữa; màu: #999; ) #logo mạnh ( font-weight: normal; ) #logo span ( display: block; font-size: 4em; line-height: 0.7em; color: #666; ) p, h2, h3 ( line-height: 1.6em; ) a ( màu: #f03; )

    Trong các kiểu này, chúng tôi đặt các góc tròn cho phần tử #centered. Trong CSS3, điều này sẽ chịu trách nhiệm cho thuộc tính bán kính đường viền. Điều này chưa được một số trình duyệt triển khai, ngoại trừ việc sử dụng tiền tố -moz và -webkit cho Mozilla Firefox và Safari/Webkit.

    Khả năng tương thích

    Như bạn có thể đã đoán, nguồn gốc chính của vấn đề tương thích là Internet Explorer:

    • Phần tử #floater phải được đặt chiều rộng
    • IE 6 có thêm phần đệm xung quanh các menu

    235881 lượt xem

    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 bên ngoài và đơn vị trong nhà đượ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). Vì thế ứng dụng của tài sản này không cung cấp gì cho yếu tố bên ngoài. Hơn nữa, việc áp dụng thuộc tính này cho phần tử bên trong cũng sẽ không có tác dụng gì, vì khối dòng(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 tôi, chúng tôi 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 quyết định này– từ quan điểm ngữ nghĩa, việc sử dụng bảng để căn chỉnh là không đúng. 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 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/

    Dấu trừ phương pháp này là chiều cao của khối bên ngoài phải được biết.

    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 thành thiết bị bên ngoài định vị tương đối và đối với nội bộ - tuyệt đối;
    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; ) . bên trong ( 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 phương pháp trước đó Bạn không thể đặt giá trị theo tỷ lệ phần trăm? Bởi vì giá trị phần trăm của thuộc tính ký quỹ được tính tương ứng với phần tử cha, giá trị 50% sẽ bằng một nửa chiều cao của khối bên ngoài và chúng ta cần nâng khối 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

    Hầu hết cách hiện đại căn chỉnh theo chiều dọc là sử dụng Flexbox (thường được gọi là Flexbox). mô-đun này cho phép bạn kiểm soát linh hoạt vị trí của các thành phần trên trang, sắp xếp chúng ở hầu hết mọi nơi. Căn giữa cho Flexbox là một công việc rất đơn giản.

    Khối bên ngoài cần được đặt thành display: flex và khối bên trong thành Margin: auto . Và đó là tất cả! Đẹp chứ?

    Bên ngoài ( hiển thị: flex; chiều rộng: 200px; chiều cao: 200px; ) . bên trong ( chiều rộng: 100px; lề: tự động; )
    http://jsfiddle.net/c1bgfffq/14/

    Nhược điểm của phương pháp này là Flexbox chỉ được hỗ trợ bởi các trình duyệt hiện đại.

    Tôi nên chọn phương pháp nào?

    Bạn cần bắt đầu từ tuyên bố vấn đề:
    • Để căn chỉnh văn bản theo chiều dọc, tốt hơn nên sử dụng thuộc tính thụt lề dọc hoặc thuộc tính line-height.
    • Đối với các phần tử được định vị tuyệt đối với chiều cao đã biết (ví dụ: biểu tượng), phương pháp có thuộc tính lề trên âm là lý tưởng.
    • Đối với các trường hợp phức tạp hơn, khi không xác định được chiều cao của khối, bạn cần sử dụng phần tử giả hoặc thuộc tính biến đổi.
    • Chà, nếu bạn may mắn đến mức không cần hỗ trợ các phiên bản cũ hơn của trình duyệt IE, thì tất nhiên, tốt hơn hết bạn nên sử dụng Flexbox.

    Thẻ: Thêm thẻ

  • 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; ) . bên trong ( 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.

    Khi trình bày một trang, thường phải căn chỉnh trung tâm CSS-way: 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ì mục đích trang trí, cần đặt văn bả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 này yêu cầu căn chỉnh văn bản bằng cách sử dụ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 Căn chỉnh CSS Việc căn giữa văn bản được thực hiện bằng một dòng:

    • 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 giữa

    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. Đối với điều này có tài sản nổi, 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

    Có những trường hợp việc căn chỉnh giữa bằng các phương pháp CSS là không đủ, bạn cũng cần phải thay đổi; vị trí thẳng đứng 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; để làm đ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 chỉnh bằng Giơi hạn dươi- .child(vertical-align:bottom);

    Cả text-align và Vertical-align đề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. Một phần tử có lớp thứ hai được căn trái và khối cuối cùng- Phía bê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ụ: zeroing. Trong trường hợp này, font-size: 0 được ghi trong thuộc tính của phần tử gốc. 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.

    Việc căn chỉnh các khối cho phép bạn tạo ra những khối đẹp mắt và trang chức năng: điều này bao gồm cách bố trí bố cục chung, cách sắp xếp hàng hóa trong các cửa hàng trực tuyến và ảnh trên trang web danh thiếp.

    Bài viết hôm nay nhằm mục đích chỉ cho bạn cách căn giữa một div, theo cả chiều ngang và chiều dọc, bằng cách sử dụng một số thủ thuật CSS. Chúng tôi cũng sẽ cho bạn biết cách căn giữa toàn bộ trang hoặc trong một phần tử div riêng lẻ.

    Dễ dàng căn giữa phần tử DIV trên trang

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

    CSS

    Center-div ( lề: 0 tự động; chiều rộng: 100px; )

    Ví dụ

    Giá trị auto trong thuộc tính lề đặt lề trái và lề phải cho toàn bộ không gian có sẵn trên trang. Điều quan trọng cần nhớ ở đây là phần tử div ở giữa phải được đặt giá trị chiều rộng.

    Căn giữa DIV bên trong phần tử DIV theo cách cũ

    Phương pháp div căn giữa này sẽ hoạt động trong tất cả các trình duyệt.

    CSS

    Div bên ngoài ( đệm: 30px; ) .inner-div ( lề: 0 tự động; chiều rộng: 100px; )

    HTML

    Ví dụ

    Div bên ngoài có thể được đặt ở bất cứ đâu, nhưng div bên trong phải có chiều rộng được chỉ định ( chiều rộng).

    Căn giữa DIV bên trong phần tử DIV bằng khối nội tuyến

    Trong phương pháp này div định tâm bên trong div không cần thiết phải chỉ định chiều rộng của phần tử bên trong. Nó sẽ hoạt động trong tất cả trình duyệt hiện đại, bao gồm cả IE8.

    CSS

    Div bên ngoài ( đệm: 30px; căn chỉnh văn bản: giữa; ) .inner-div ( hiển thị: khối nội tuyến; đệm: 50px; )

    HTML

    Ví dụ

    thuộc tính căn chỉnh văn bản chỉ hoạt động trên các phần tử nội tuyến. Giá trị khối nội tuyến cho phép div bên trong được hiển thị dưới dạng phần tử nội tuyến và cả khối ( chặn Nội tuyến). Thuộc tính text-align trên phần tử div bên ngoài sẽ cho phép chúng ta căn giữa div bên trong.

    Căn giữa DIV bên trong phần tử DIV theo chiều ngang và chiều dọc

    Ở đây lề: auto được sử dụng để căn giữa div ở giữa trang. Ví dụ này sẽ hoạt động trong tất cả các trình duyệt hiện đại.

    CSS

    Div bên ngoài ( đệm: 30px; ) .inner-div ( lề: tự động; chiều rộng: 100px; chiều cao: 100px; )

    HTML

    Ví dụ

    Phần tử div bên trong phải có chiều rộng được chỉ định ( chiều rộng) và chiều cao ( chiều cao). Phương thức sẽ không hoạt động nếu phần tử div bên ngoài có chiều cao cố định.

    Căn giữa DIV ở cuối trang

    Ở đây cho vị trí div Căn giữa theo chiều dọc sử dụng lề: tự động và định vị tuyệt đối cho phần tử bên ngoài. Phương pháp này sẽ hoạt động trong tất cả các trình duyệt hiện đại.

    CSS

    Div bên ngoài (vị trí: tuyệt đối; dưới cùng: 30px; chiều rộng: 100%; ) .inner-div ( lề: 0 tự động; chiều rộng: 100px; chiều cao: 100px; màu nền: #ccc; )

    HTML

    Ví dụ

    Div bên trong phải được đặt chiều rộng. Khoảng trống ở cuối trang được điều chỉnh bằng thuộc tính dưới cùng của div bên ngoài. Bạn cũng có thể căn giữa div ở đầu trang bằng cách thay thế thuộc tính dưới cùng bằng thuộc tính trên cùng.

    Căn giữa DIV trên trang theo chiều dọc và chiều ngang

    Ở đây, để căn giữa div, chúng ta lại sử dụng lề: auto và định vị tuyệt đối của div bên ngoài. Phương pháp này sẽ hoạt động trong tất cả các trình duyệt hiện đại.

    CSS

    Center-div (vị trí: tuyệt đối; lề: tự động; trên cùng: 0; phải: 0; dưới cùng: 0; trái: 0; chiều rộng: 100px; chiều cao: 100px; )

    Ví dụ

    Phần tử div phải có chiều rộng được đặt ( chiều rộng) và chiều cao ( chiều cao).

    Tạo định tâm thích ứng của phần tử DIV trên trang

    Ở đây cho căn chỉnh divở Trung tâm sử dụng CSS Chúng tôi làm cho chiều rộng của phần tử div phản ứng nhanh để nó phản ứng với những thay đổi về kích thước cửa sổ. Phương pháp này hoạt động trong tất cả các trình duyệt.

    CSS

    Center-div ( lề: 0 tự động; chiều rộng tối đa: 700px; )

    Ví dụ

    Phần tử div ở giữa phải được đặt thuộc tính chiều rộng tối đa.

    Định tâm DIV bên trong một phần tử bằng cách sử dụng thuộc tính khối bên trong

    Phần tử div bên trong ở đây có tính đáp ứng. Phương pháp căn giữa div bên trong div này sẽ hoạt động trên tất cả các trình duyệt.

    CSS

    Div bên ngoài ( đệm: 30px; ) .inner-div ( lề: 0 tự động; chiều rộng tối đa: 700px; )

    HTML

    Ví dụ

    Div bên trong phải được đặt thuộc tính chiều rộng tối đa.

    Căn giữa hai div đáp ứng cạnh nhau

    Ở đây chúng ta có hai phần tử div đáp ứng cạnh nhau. Phương pháp đặt div ở giữa màn hình này sẽ hoạt động trong tất cả các trình duyệt hiện đại.

    CSS

    Vùng chứa ( text-align: center; ) .left-div ( display: inline-block; max-width: 300px; Vertical-align: top; ) .right-div ( display: inline-block; max-width: 150px; ) màn hình và (max-width: 600px) ( .left-div, .right-div ( lef max-width: 100%; ) )

    HTML

    Ví dụ

    Ở đây chúng ta có một số phần tử được áp dụng thuộc tính khối nội tuyến, nằm bên trong vùng chứa ở giữa. Ví dụ này cũng sử dụng truy vấn phương tiện CSS; nghĩa là, nếu kích thước màn hình nhỏ hơn 600 pixel thì thuộc tính chiều rộng tối đa cho cả div bên trái và bên phải được đặt thành 100%.

    Phần tử DIV được căn giữa bằng Flexbox

    Ở đây chúng tôi căn giữa div CSS bằng Flexbox. Nó nhằm mục đích tạo thuận lợi cho quá trình phát triển thiết kế giao diện người dùng. Mô-đun này được hỗ trợ bởi Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+ và Trình duyệt Android 40+.

    CSS

    Vùng chứa ( display: flex; căn chỉnh-items: center; justify-content: center; chiều cao: 100vh; ) .item ( màu nền: #f3f2ef; bán kính đường viền: 3px; chiều rộng: 200px; chiều cao: 100px; )