trang chủ-Cách mở một tập tin-Lệnh CSS để căn giữa. Ẩn và hiển thị các phần tử khối

Lệnh CSS để căn giữa. Ẩn và hiển thị các phần tử khối

Về cơ bản, có một số cách khác nhau để căn giữa một đối tượng theo chiều dọc bằng CSS, nhưng việc chọn đúng cách có thể khó khăn. 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 nên được đặt ở trung tâm.
#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 tuyệt đối định vị div-a, trong đó phần trên cùng được đặt thành 50% và lề trên (lề trên) trừ đi một nửa chiều cao của 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; cho div với 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 chỉnh vào giữa. Đ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 trong Internet Explorer
  • 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 cách căn chỉnh trung tâm theo chiều dọc, hãy tạo một trang web đơn giản có kết quả 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 sẵn có.

    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 trên 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; 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 tính mà không có phần đệm bên trong và bên ngoài (phần đệm và lề), nên chúng tôi đặ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.

    Lưu ý rằng sau đó chúng tôi đã chỉ định rằng các liên kết phải được hiển thị dưới dạng phần tử khối. 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.

    Một điều thú vị khác 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ẽ được thực hiện bởi 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

    Xin chào! Hãy tiếp tục nắm vững những điều cơ bản ngôn ngữ HTML. Hãy xem bạn cần viết những gì để căn chỉnh văn bản về giữa, chiều rộng hoặc các cạnh.

    Bắt tay vào công việc, chúng ta hãy xem cách căn giữa văn bản trong ba những cách khác. Hai cái cuối cùng được liên kết trực tiếp với biểu định kiểu. Nó có thể là một tệp CSS kết nối với các trang của trang web và xác định giao diện của chúng.

    Phương pháp 1 - làm việc trực tiếp với HTML

    Nó thực sự khá đơn giản. Xem ví dụ dưới đây.

    Căn chỉnh đoạn văn vào giữa.

    Nếu bạn cần di chuyển đoạn văn bản mặt khác, thay vì tham số “center”, chúng ta nhập các giá trị sau:

    • biện minh – căn chỉnh văn bản theo chiều rộng của trang;
    • phải – ở cạnh phải;
    • trái - bên trái.

    Bằng cách tương tự, bạn có thể di chuyển nội dung trong tiêu đề (h1, h2) và vùng chứa (div).

    Phương pháp 2 và 3 - sử dụng kiểu

    Thiết kế được trình bày ở trên có thể được biến đổi một chút. Hiệu quả sẽ giống nhau. Để làm điều này, bạn cần phải viết mã dưới đây.

    Khối văn bản.

    Ở dạng này, mã được viết trực tiếp vào HTML để căn giữa nội dung văn bản.

    Có thêm nữa không Lựa chọn thay thếđể đạt được kết quả. Bạn sẽ cần phải thực hiện một vài bước.

    Bước 1. Trong mã chính viết

    Tài liệu văn bản.

    Bước 2. Trong plugin tập tin CSS nhập mã sau đây:

    Rovno (căn chỉnh văn bản: center;)

    Tôi lưu ý rằng từ “rovno” chỉ là tên của một lớp có thể được gọi khác nhau. Điều này được để lại theo quyết định của người lập trình.

    Bằng cách tương tự, trong HTML, bạn có thể dễ dàng đặt văn bản ở giữa, căn đều và căn chỉnh sang cạnh phải hoặc trái của trang. Như bạn có thể thấy, có nhiều lựa chọn để đạt được mục tiêu của mình.

    Chỉ cần một vài câu hỏi:

    • Bạn đang thực hiện một dự án thông tin phi lợi nhuận?
    • Bạn có muốn trang web của bạn hoạt động tốt? công cụ tìm kiếm?
    • Bạn có muốn kiếm thu nhập trực tuyến?

    Nếu tất cả các câu trả lời đều tích cực thì chỉ cần nhìn vào o cách tiếp cận tích hợp tới sự phát triển của trang web. Thông tin sẽ đặc biệt hữu ích nếu nó chạy trên WordPress CMS.

    Tôi muốn chỉ ra rằng trang web của riêng bạn chỉ là một trong nhiều lựa chọn để tạo thu nhập thụ động hoặc chủ động trên Internet. Blog của tôi dành riêng cho các cơ hội tài chính trực tuyến.

    Bạn đã từng làm việc trong lĩnh vực chênh lệch lưu lượng truy cập, viết quảng cáo và các lĩnh vực hoạt động khác tạo ra thu nhập chính hoặc bổ sung thông qua cộng tác từ xa chưa? Bạn có thể tìm hiểu về điều này và nhiều hơn nữa ngay bây giờ trên các trang blog của tôi.

    Tôi sẽ công bố nhiều thông tin thực sự hữu ích trong tương lai. Giữ liên lạc. Nếu muốn, bạn có thể đăng ký nhận thông tin cập nhật Workip qua e-mail. Mẫu đăng ký nằm ở bên dưới.

    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 cách sử dụng " phần đệm".

    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 khối được đặt thành " vị trí: tuyệt đối", thì nó có thể được định vị tương đối so với cha mẹ gần nhất của nó bằng "vị trí: tương đối". Điều này yêu cầu tất cả các thuộc tính (" đứng đầu","Phải","đáy","bên trái") của dàn lạnh để gán 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 ; bên phải : 0 ; lề : tự động ;

    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 " căn chỉnh văn bản". Khi được đặt thành " trung tâm"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 một bài đồng dao dành cho trẻ em ở đâu đó, 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 ; )

    Cần lưu ý rằng thuộc tính này sẽ hoạt động không chỉ cho văn bản mà còn cho mọi thành phần nội tuyến ("display: inline").

    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 ; căn chỉnh văn bản : trái ; nền : #FFE5E5 ; )

    Căn chỉnh các khối bằ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 người ta sử dụng chữ viết tắt: " lề: 0 tự động" (có thể sử dụng bất kỳ giá trị nào 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 " chiều cao giữa các dòng" và đặt nó ở độ cao mong muốn. Để có độ tin cậy, cũng đáng đặt "chiều cao", 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 theo chiều dọc : nền : #FFFAF2 ;

    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

    Tài sản " căn chỉnh theo chiều dọc" 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. Tất nhiên, bố cục dạng bảng hiện được coi là cổ xưa, nhưng trong những trường hợp đặc biệt, bạn có thể mô phỏng nó bằng cách chỉ định " hiển thị: ô bảng".

    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 ;

    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 " căn dọc: giữa". Hơn nữa, tất cả các phần tử có " Hiển thị nội dòng" nằm trên cùng một đường thẳng sẽ thẳng hàng với một đườ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ị: uốn cong 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 tập trung nội dung sẽ không còn là vấn đề nữa!

    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 text-align 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 lề: auto được sử dụng để căn giữa div theo chiều dọc và định vị tuyệt đối được sử dụng cho yếu 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ó bộ chiều rộng ( 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 là để căn chỉnh div vào giữa 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ó CSS div căn giữa bằng cách sử dụ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;just-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; )

    Hôm nay bạn đọc thân mến, chúng ta sẽ giải quyết vấn đề căn chỉnh theo chiều dọc trong một khối div.

    Rất có thể bạn đã biết về sự tồn tại của một thuộc tính CSS tuyệt vời căn chỉnh theo chiều dọc. Và chính Chúa đã ra lệnh cho chúng ta sử dụng chính xác đặc tính này để căn chỉnh theo chiều dọc (không phải vô cớ mà nó có một cái tên tự giải thích như vậy).

    Xây dựng bài toán: Bạn cần căn giữa nội dung của khối có chiều cao thay đổi so với chiều dọc.

    Bây giờ chúng ta hãy bắt đầu giải quyết vấn đề.

    Và như vậy, chúng ta có một khối, chiều cao của nó có thể thay đổi:

    Chặn nội dung

    Điều đầu tiên bạn nghĩ đến là thực hiện động tác giả sau:

    Chặn nội dung

    Có mọi lý do để tin rằng cụm từ Chặn nội dung sẽ được căn chỉnh theo chiều cao trung tâm của vùng chứa div.

    Nhưng nó không có ở đó! Chúng tôi sẽ không đạt được bất kỳ sự liên kết trung tâm như mong đợi nào theo cách này. Và tại sao? Có vẻ như mọi thứ đều được chỉ định chính xác. Hóa ra đây chính là sự chà xát: tài sản căn chỉnh theo chiều dọc chỉ có thể được sử dụng để căn chỉnh nội dung của các ô trong bảng hoặc để căn chỉnh các phần tử nội tuyến tương đối với nhau.

    Về căn chỉnh bên trong ô bảng, tôi nghĩ mọi thứ đều rõ ràng. Nhưng tôi sẽ giải thích một trường hợp khác với các phần tử nội tuyến.

    Căn chỉnh theo chiều dọc của các phần tử nội tuyến

    Giả sử bạn có một dòng văn bản được chia nhỏ bằng thẻ dòng thành các phần:

    Bạn chào mừng cái chữ!

    Dưới thẻ chữ thườngđược hiểu là một vật chứa, bề ngoài của nó không dẫn đến việc chuyển nội dung sang dòng mới.

    Hành động của thẻ khối làm cho nội dung của vùng chứa được chuyển sang một dòng mới.

    - Cái này thẻ chặn. Nếu chúng ta gói các đoạn văn bản thành các khối
    , sau đó mỗi người trong số họ sẽ ở trên một dòng mới. Sử dụng thẻ , mà, không giống như
    , là chữ thường, các container sẽ không được chuyển sang dòng mới, tất cả các container sẽ vẫn còn trên một dòng.

    Thùng đựng hàng thuận tiện sử dụng khi chỉ định một phần của văn bản định dạng đặc biệt(đánh dấu bằng màu sắc, phông chữ khác nhau, v.v.)

    Đối với container Áp dụng các thuộc tính CSS sau:

    #perviy( Vertical-align:sub; ) #vtoroy( Vertical-align:3px; ) #tretiy( Vertical-align:-3px; )

    Dòng văn bản kết quả sẽ trông như thế này:

    Đây không gì khác hơn là căn chỉnh theo chiều dọc của các phần tử nội tuyến và Thuộc tính CSS căn chỉnh theo chiều dọcđối phó với nhiệm vụ này một cách hoàn hảo.

    Chúng ta hơi phân tâm một chút, bây giờ chúng ta quay lại nhiệm vụ chính của mình.

    Căn chỉnh dọc trong vùng chứa div

    Dù thế nào đi nữa, để căn chỉnh trong vùng chứa div, chúng ta sẽ sử dụng thuộc tính căn chỉnh theo chiều dọc. Như tôi đã nói, tài sản này có thể được sử dụng trong trường hợp căn chỉnh các phần tử nội tuyến (chúng tôi đã thảo luận chi tiết về trường hợp này ở trên và nó không phù hợp với chúng tôi để căn chỉnh trong vùng chứa div); tất cả những gì còn lại là sử dụng thực tế rằng căn chỉnh theo chiều dọc hoạt động cho các ô của bảng.

    Làm thế nào chúng ta có thể sử dụng điều này? Chúng tôi không có bảng, chúng tôi làm việc với vùng chứa div.

    Ha, hóa ra lại rất đơn giản.

    Thuộc tính CSS trưng bày cho phép bạn biến khối div của chúng tôi thành một ô trong bảng, việc này có thể được thực hiện dễ dàng và tự nhiên:

    Giả sử chúng ta có một lớp div căn chỉnh văn bản:

    Chặn nội dung

    Đối với khối này, chúng tôi chỉ định thuộc tính CSS sau:

    Textalign(hiển thị: ô bảng; )

    Hướng dẫn CSS này sẽ biến div của chúng ta thành một ô bảng một cách thần kỳ mà không cần thay đổi trực quan nó theo bất kỳ cách nào. Và đối với một ô trong bảng, chúng ta có thể áp dụng thuộc tính căn chỉnh theo chiều dọcđầy đủ và căn chỉnh theo chiều dọc mong muốn sẽ hoạt động.

    Tuy nhiên, mọi chuyện không thể kết thúc đơn giản như vậy. Chúng tôi có một trình duyệt IE tuyệt vời. Anh ta không biết cách làm việc với tài sản hiển thị: ô bảng(Tôi khuyên bạn nên đọc bảng minh họa chức năng của thuộc tính CSS này trong các trình duyệt khác nhau trên trang web htmlbook.ru). Vì vậy, chúng ta sẽ phải dùng đến nhiều thủ đoạn khác nhau.

    Có nhiều cách để đạt được sự căn chỉnh trong vùng chứa div cho tất cả các trình duyệt:

    • Phương pháp sử dụng vùng chứa div phụ trợ bổ sung
    • Phương pháp sử dụng biểu thức. Nó được kết nối với một phép tính phức tạp về chiều cao khối. Không có Kiến thức về JavaScript không có cách nào xung quanh nó.
    • Sử dụng thuộc tính chiều cao dòng. Phương pháp này Chỉ thích hợp cho việc căn chỉnh theo chiều dọc trong một khối có chiều cao đã biết và do đó thường không áp dụng được.
    • Sử dụng offset nội dung tuyệt đối và tương đối trong trường hợp trình duyệt IE. Phương pháp này đối với tôi có vẻ dễ hiểu và đơn giản nhất. Ngoài ra, nó có thể triển khai được cho vùng chứa div có chiều cao thay đổi. Chúng tôi sẽ tập trung vào nó chi tiết hơn.

    Như bạn đã hiểu, chúng ta chỉ cần giải quyết vấn đề căn chỉnh theo chiều dọc trong IE liên quan đến sự hiểu lầm về thuộc tính của nó hiển thị: ô bảng(không phải IE6, cũng không phải IE7, cũng không phải IE8 không quen thuộc với tính chất này). Vì vậy, sử dụng bình luận có điều kiện Chúng tôi sẽ chỉ định các thuộc tính CSS khác nhau dành riêng cho dòng trình duyệt IE.

    Bình luận có điều kiện

    Loại công trình:

    ... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

    được gọi là nhận xét có điều kiện (hãy cẩn thận, loại nhận xét có điều kiện phải hoàn toàn tương ứng với ví dụ đã cho, tối đa một khoảng trắng).

    Các hướng dẫn chứa trong nhận xét có điều kiện như vậy sẽ chỉ được thực thi nếu trình duyệt thông dịch mã này, thuộc họ IE.

    Do đó, bằng cách sử dụng nhận xét có điều kiện, chúng ta có thể ẩn một đoạn mã khỏi tất cả các trình duyệt ngoại trừ IE.

    Giải pháp của vấn đề

    Vì tất cả mùi tây này, chúng tôi sẽ cần cung cấp mã HTML của mình với hai vùng chứa bổ sung. Khối văn bản của chúng ta sẽ trông như thế này:

    Đây là một loại văn bản xác minh.
    Nó bao gồm hai dòng.

    Đối với lớp chứa div căn chỉnh văn bản Các thuộc tính CSS được đặt để căn chỉnh nội dung của nó theo chiều dọc cho tất cả các trình duyệt thông thường (tất nhiên ngoại trừ IE):

    Hiển thị: ô bảng; căn dọc: giữa;

    Và hai thuộc tính nữa đặt chiều rộng và chiều cao cho khối:

    Chiều rộng: 500px; chiều cao: 500px;

    Điều này là khá đủ để căn chỉnh nội dung của vùng chứa ở giữa theo chiều dọc, trong tất cả các trình duyệt ngoại trừ IE.

    Bây giờ chúng ta bắt đầu thêm các thuộc tính liên quan đến căn chỉnh dành cho các trình duyệt thuộc họ IE(đối với họ chúng tôi đã sử dụng khối bổ sung div Và nhịp):

    Đề cập đến thẻ div bên trong một khối lớp căn chỉnh văn bản. Để thực hiện việc này, trước tiên bạn cần chỉ ra tên của lớp, sau đó, cách nhau bằng dấu cách, thẻ mà chúng ta đang truy cập.

    Căn chỉnh văn bản div(vị trí: tuyệt đối; trên cùng: 50%; )

    Thiết kế này có nghĩa là: dành cho tất cả mọi người thẻ div bên trong một khối có một lớp căn chỉnh văn bảnáp dụng các thuộc tính được liệt kê.

    Theo đó, các kiểu được chỉ định cho khối căn chỉnh văn bảnđược sửa đổi:

    Textalign(hiển thị: ô bảng; căn dọc: giữa; chiều rộng:500px; chiều cao: 500px; vị trí: tương đối; )

    Bây giờ điểm trên cùng bên trái của khối văn bản được di chuyển xuống 50%.

    Để giải thích điều gì đang xảy ra, tôi đã vẽ một minh họa:

    Như bạn có thể thấy trong hình, chúng tôi đã đạt được một số tiến bộ. Nhưng đó không phải là tất cả! Điểm trên cùng bên trái của khối màu vàng thực sự đã di chuyển xuống 50% so với khối gốc (màu tím). Nhưng chúng ta cần nó ở độ cao bằng 50% chiều cao của khối màu tím. trung tâm của khối màu vàng, không phải điểm trên cùng bên trái của nó.

    Bây giờ thẻ sẽ phát huy tác dụng nhịp và vị trí tương đối của nó:

    Khoảng văn bản(vị trí: tương đối; trên cùng: -50%; )

    Vì vậy, chúng ta đã dịch chuyển khối màu vàng lên 50% chiều cao của nó so với vị trí ban đầu. Như bạn hiểu, chiều cao của khối màu vàng bằng chiều cao của nội dung được căn giữa. VÀ hoạt động cuối cùng bằng một thùng chứa span, đặt nội dung của chúng ta vào giữa khối màu tím. Hoan hô!

    Hãy gian lận một chút

    Trước hết, chúng ta cần ẩn mùi tây khỏi tất cả các trình duyệt thông thường và mở nó cho IE. Tất nhiên, điều này có thể được thực hiện bằng cách sử dụng nhận xét có điều kiện;

    Có một vấn đề nhỏ. Nếu nội dung được căn giữa quá cao thì điều này sẽ dẫn đến hậu quả khó chịu: có thêm chiều cao cho cuộn dọc.

    Giải pháp cho vấn đề: cần thêm thuộc tính tràn: ẩn khối textalign.

    Tìm hiểu chi tiết về tài sản tràn ra có thể trong .

    Hướng dẫn CSS cuối cùng cho khối căn chỉnh văn bản có dạng:

    Textalign( display: table-cell; Vertical-align: middle; width:500px; Height: 500px; vị trí: tương đối; tràn: ẩn; viền: 1px màu đen đậm; )

    Xin lỗi, tôi quên đề cập đến một tâm điểm. Nếu bạn cố gắng thiết lập chiều cao của khối lớp căn chỉnh văn bản V. phần trăm , Sau đó bạn có sẽ không có gì hiệu quả.

    Căn giữa khối có chiều cao thay đổi

    Rất thường xuyên có nhu cầu đặt chiều cao của khối lớp căn chỉnh văn bản không phải bằng pixel mà là phần trăm chiều cao của khối cha và căn chỉnh nội dung của vùng chứa div ở giữa.

    Điều đáng chú ý là không thể thực hiện điều này đối với một ô trong bảng (nhưng khối lớp căn chỉnh văn bản biến chính xác thành một ô bảng, nhờ thuộc tính hiển thị: ô bảng).

    Trong trường hợp này, bạn phải sử dụng một khối bên ngoài có thuộc tính CSS được chỉ định hiển thị: bảng và đã đặt giá trị phần trăm của chiều cao cho nó. Sau đó, khối được lồng trong đó với lệnh CSS hiển thị: ô bảng, sẽ vui vẻ kế thừa chiều cao của khối cha.

    Để triển khai khối có chiều cao thay đổi trong ví dụ của chúng tôi, chúng tôi sẽ chỉnh sửa CSS một chút:

    Đến lớp căn chỉnh văn bản chúng tôi sẽ thay đổi giá trị tài sản trưng bày Với ô bảng TRÊN bàn và loại bỏ chỉ thị căn chỉnh căn dọc: giữa. Bây giờ chúng ta có thể thay đổi giá trị chiều cao từ 500 pixel thành 100% một cách an toàn.

    Vì vậy các thuộc tính CSS cho khối lớp căn chỉnh văn bản sẽ trông như thế này:

    Textalign( display: bảng; chiều rộng: 500px; chiều cao: 100%; vị trí: tương đối; tràn: ẩn; đường viền: 1px màu đen đậm; )

    Tất cả những gì còn lại là triển khai việc tập trung vào nội dung. Để làm điều này, một thùng chứa div được lồng trong một khối lớp căn chỉnh văn bản(đây là khối màu vàng giống như trong hình), bạn cần đặt thuộc tính CSS hiển thị: ô bảng, thì nó sẽ kế thừa chiều cao 100% từ khối cha căn chỉnh văn bản(khối màu tím). Và không có gì ngăn cản chúng ta căn chỉnh nội dung của vùng chứa div lồng nhau ở giữa với thuộc tính căn dọc: giữa.

    Chúng tôi nhận được một danh sách bổ sung các thuộc tính CSS khác cho khối div được lồng trong vùng chứa căn chỉnh văn bản.

    Textalign div( display: table-cell; Vertical-align: middle; )

    Đó là toàn bộ thủ thuật. Nếu muốn, bạn có thể có chiều cao thay đổi với nội dung được căn giữa.

    Thông tin bổ sung về căn chỉnh theo chiều dọc khối có chiều cao thay đổi có thể thu được.

Các ấn phẩm liên quan: