Căn chỉnh trong css. Một dòng trên mỗi khối với chiều cao đã biết. Căn chỉnh các phần tử biểu mẫu

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. Hãy cùng xem xét 5 phương pháp khác nhau cũng như ưu và nhược điểm của từng phương pháp. Ví dụ.

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

Phương pháp này giả định rằng chúng ta đặt một số phần tử để hiển thị 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 trên đó (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 ta 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( clear: 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 chỉnh vào giữa. Điều này rất giống với phương pháp nổi tiếng là căn giữa theo chiều ngang một 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 số dòng văn bản #content( Height: 100px; line-height: 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 Một công ty
- Trang chủ
- Các sản phẩm
- Blog
- Liên hệ
- Về
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 đố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; nền: #fff; đường viền: 4px Solid #666; ) #bottom ( vị trí: tuyệt đối; đáy: 0; phải: 0; ) #nav ( vị trí: tuyệt đối; trái: 0; trên cùng: 0; dưới cùng: 0; phải: 70%; đệm: 20px; lề: 10px; ) #content ( vị trí: tuyệt đối; trái: 30%; phải: 0; trên cùng: 0; dưới cùng: 0; tràn: tự động; chiều cao: 340px; phần đệm: 20px; lề: 10px; )
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; phần đệm: 7px; lề: 0; trang trí văn bản: không; màu: #000; viền dưới: 1px liền khối #bbb; căn chỉnh văn bản: phải; ) #nav li a::after ( nội dung: """; màu: #aaa; font-weight: đậm; hiển thị: nội tuyến; float: phải; lề: 0 2px 0 5px; ) #nav li a:hover, #nav li a:focus ( nền: # f8f8f8; border-bottom-color: #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ử. Đây là một cách hay để thêm biểu tượng hoặc ký hiệu, chẳng hạn 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 triển khai trong một số trình duyệt, ngoài 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
237154 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 biết kích thước của các khối bên ngoài và bên trong. Hãy thêm quy tắc display: inline-block vào phần tử bên trong và text-align: center và Vertical-align: middle vào phần tử bên ngoài.
Hãy nhớ rằng căn chỉnh chỉ áp dụng cho các phần tử có chế độ hiển thị nội tuyến hoặc khối nội tuyến.
Hãy đặt kích thước của các khối cũng như màu nền để chúng ta có thể nhìn thấy đường viền của chúng.
Bên ngoài ( chiều rộng: 200px; chiều cao: 200px; căn chỉnh văn bản: giữa; căn chỉnh dọc: giữa; màu nền: #ffc; ) .inner ( hiển thị: khối nội tuyến; chiều rộng: 100px; chiều cao: 100px; màu nền : #fcc; )
Sau khi áp dụng các kiểu, chúng ta sẽ thấy khối bên trong được căn chỉnh theo chiều ngang chứ không phải theo chiều dọc:
http://jsfiddle.net/c1bgfffq/
Tại sao nó lại xảy ra? Vấn đề là thuộc tính căn chỉnh dọc ảnh hưởng đến việc căn chỉnh của chính phần tử chứ không phải nội dung của nó (ngoại trừ khi nó được áp dụng cho các ô trong bảng). Do đó, việc áp dụng thuộc tính này cho phần tử bên ngoài không tạo ra bất cứ thứ gì. Hơn nữa, việc áp dụng thuộc tính này cho một phần tử bên trong cũng sẽ không có tác dụng gì, vì các khối nội tuyến được căn chỉnh theo chiều dọc so với các khối liền kề và trong trường hợp của chúng ta, chúng ta có một khối nội tuyến.
Có một số kỹ thuật để giải quyết vấn đề này. Dưới đây chúng ta sẽ xem xét kỹ hơn về từng người trong số họ.
Căn chỉnh bằng bảng Giải pháp đầu tiên bạn nghĩ đến là thay thế khối bên ngoài bằng bảng gồm một ô. Trong trường hợp này, việc căn chỉnh sẽ được áp dụng cho nội dung của ô, tức là cho khối bên trong.

http://jsfiddle.net/c1bgfffq/1/
Nhược điểm rõ ràng của giải pháp này là, từ quan điểm ngữ nghĩa, việc sử dụng bảng để căn chỉnh là không chính xác. Nhược điểm thứ hai là việc tạo bảng yêu cầu thêm một phần tử khác xung quanh khối bên ngoài.
Điểm trừ đầu tiên có thể được loại bỏ một phần bằng cách thay thế thẻ table và td bằng div và thiết lập chế độ hiển thị bảng trong CSS.

.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Tuy nhiên, khối bên ngoài vẫn sẽ là một cái bàn với mọi hậu quả sau đó.
Căn chỉnh bằng cách thụt lề Nếu biết chiều cao của khối bên trong và bên ngoài, thì có thể thiết lập căn chỉnh bằng cách sử dụng thụt lề dọc của khối bên trong bằng công thức: (H bên ngoài – H bên trong) / 2.
Bên ngoài ( chiều cao: 200px; ) . bên trong ( chiều cao: 100px; lề: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/
Nhược điểm của giải pháp này là nó chỉ được áp dụng trong một số trường hợp hạn chế khi đã biết chiều cao của cả hai khối.
Căn chỉnh theo chiều cao dòng Nếu bạn biết rằng khối bên trong không được chiếm nhiều hơn một dòng văn bản thì bạn có thể sử dụng thuộc tính line-height và đặt nó bằng chiều cao của khối bên ngoài. Vì nội dung của khối bên trong không được bao bọc ở dòng thứ hai nên bạn cũng nên thêm các quy tắc khoảng trắng: nowrap và tràn: ẩn.
Bên ngoài ( chiều cao: 200px; chiều cao dòng: 200px; ) . bên trong ( khoảng trắng: nowrap; tràn: ẩn; )
http://jsfiddle.net/c1bgfffq/12/
Kỹ thuật này cũng có thể được sử dụng để căn chỉnh văn bản nhiều dòng nếu bạn xác định lại giá trị chiều cao dòng cho khối bên trong, đồng thời thêm các quy tắc display: inline-block và Vertical-align: middle.
Bên ngoài ( chiều cao: 200px; chiều cao dòng: 200px; ) .inner ( chiều cao dòng: bình thường; hiển thị: khối nội tuyến; căn chỉnh dọc: giữa; )
http://jsfiddle.net/c1bgfffq/15/
Nhược điểm của phương pháp này là phải biết chiều cao của khối bên ngoài.
Căn chỉnh bằng cách sử dụng "kéo dài" Phương pháp này có thể được sử dụng khi chưa biết chiều cao của khối bên ngoài nhưng đã biết chiều cao của khối bên trong.
Để làm điều này bạn cần:
đặt vị trí tương đối cho khối bên ngoài và định vị tuyệt đối cho khối bên trong;
thêm các quy tắc top: 0 và Bottom: 0 vào khối bên trong, do đó nó sẽ kéo dài đến toàn bộ chiều cao của khối bên ngoài;
đặt phần đệm dọc của khối bên trong thành tự động.

Ý 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 .

Bạn cần đặt khối bên ngoài thành vị trí tương đối và khối bên trong thành định vị tuyệt đối. Sau đó, bạn cần di chuyển khối bên trong xuống một nửa chiều cao của khối bên ngoài trên cùng: 50% và nâng nó lên một nửa chiều cao của chính nó lề-top: -H bên trong / 2.

Bên ngoài ( vị trí: tương đối; ) .inner ( chiều cao: 100px; vị trí: tuyệt đối; trên cùng: 50%; lề trên: -50px; )
http://jsfiddle.net/c1bgfffq/13/

Nhược điểm của phương pháp này là phải biết chiều cao của dàn lạnh.

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.

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.

Để 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ẻ

Rất thường xuyên trong bố cục, cần phải căn giữa một số phần tử theo chiều ngang và/hoặc chiều dọc. Vì vậy, tôi quyết định thực hiện một bài viết với nhiều cách căn giữa khác nhau để mọi thứ đều ở một nơi.

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.

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

Thích hợp cho việc định tâm các khối có chiều rộng đã biết. Chúng tôi cung cấp cho khối cha vị trí: tương đối so với vị trí tương đối với nó, phần tử ở giữa vị trí: tuyệt đối, trái: 50% và lề trái âm có giá trị bằng một nửa chiều rộng của phần tử:

Căn chỉnh với vị trí .wrapper ( vị trí: tương đối; ) .wrapper p ( trái: 50%; lề: 0 0 0 -100px; vị trí: tuyệt đối; chiều rộng: 200px; )

Tôi căn giữa

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

Để căn chỉnh một dòng văn bản, bạn có thể sử dụng cùng các giá trị chiều cao và khoảng cách dòng cho khối cha. Thích hợp cho các nút, mục menu, v.v.

chiều cao dòng .wrapper ( chiều cao: 100px; chiều cao dòng: 100px; )

Tôi được căn chỉnh theo chiều dọc

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.

Để căn chỉnh theo chiều dọc, thuộc tính display: table-cell được áp dụng cho phần tử, buộc phần tử này phải mô phỏng một ô trong bảng. Chúng tôi cũng đặt chiều cao và căn chỉnh dọc: giữa của nó. Hãy gói tất cả những thứ này vào một thùng chứa với thuộc tính dislpay: table; . :

Hiển thị căn chỉnh dọc: table-cell .wrapper ( display: table; width: 100%; ) .cell ( display: table-cell; Height: 100px; Vertical-align: middle; )

Tôi được căn chỉnh theo chiều dọc

Chúng tôi đã xem xét các cách căn chỉnh các thành phần trên một trang bằng CSS. Bây giờ chúng ta hãy xem cách triển khai jQuery.

Hãy kết nối jQuery với trang:

Tôi khuyên bạn nên viết một hàm đơn giản để căn giữa một phần tử trên trang, hãy gọi nó là AlignCenter() . Bản thân phần tử này đóng vai trò là đối số của hàm:

Hàm AlignCenter(elem) ( // code ở đây )

Trong phần nội dung của hàm, chúng tôi tính toán linh hoạt và gán tọa độ của tâm trang cho các thuộc tính CSS left và top:

Hàm căn chỉnhCenter(elem) ( elem.css(( left: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - elem. Height()) / 2 + "px" // đừng quên thêm vị trí: tuyệt đối vào phần tử để kích hoạt tọa độ )) )

Trong dòng đầu tiên của hàm, chúng ta lấy chiều rộng của tài liệu và trừ đi chiều rộng của phần tử, chia làm đôi - đây sẽ là tâm ngang của trang. Dòng thứ hai thực hiện tương tự, chỉ có chiều cao để căn chỉnh theo chiều dọc.

Hàm đã sẵn sàng, tất cả những gì còn lại là gắn nó vào các sự kiện sẵn sàng của DOM và thay đổi kích thước cửa sổ:

$(function() ( // gọi hàm căn giữa khi DOM đã sẵn sàngalignCenter($(elem)); // gọi hàm khi thay đổi kích thước cửa sổ $(window).resize(function() ( AlignCenter($(elem) )); )) // hàm căn giữa phần tử function AlignCenter(elem) ( elem.css(( // tính tọa độ trái và tọa độ trên cùng bên trái: ($(window).width() - elem.width()) / 2 + " px", top: ($(window).height() - elem.height()) / 2 + "px" )) ) ))

Các tính năng CSS3 mới, chẳng hạn như Flexbox, đang dần trở nên phổ biến. Công nghệ giúp tạo đánh dấu mà không cần sử dụng float, định vị, v.v. Nó cũng có thể được sử dụng để căn giữa các phần tử. Ví dụ: áp dụng Flexbox cho phần tử gốc.wrapper và căn giữa nội dung bên trong:

Trình bao bọc ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; Height: 500px; width: 500px; ) .wrapper .content ( lề: auto; /* lề: 0 tự động; chỉ ngang */ /* lề: auto 0; chỉ dọc */ ) Lorem ipsum dolor sit amet

Quy tắc này căn giữa phần tử theo chiều ngang và chiều dọc cùng một lúc - lề giờ đây không chỉ hoạt động đối với căn chỉnh theo chiều ngang mà còn đối với chiều dọc. Và không có chiều rộng/chiều cao đã biết.

Khi bố cục một trang, thường phải thực hiện căn chỉnh giữa bằng phương pháp CSS: ví dụ: căn giữa khối chính. Có một số tùy chọn để giải quyết vấn đề này, mỗi tùy chọn sớm hay muộn đều phải được sử dụng bởi bất kỳ nhà thiết kế bố cục nào.

Thông thường, với mục đích trang trí, cần phải đặt văn bản ở vị trí căn giữa; CSS trong trường hợp này cho phép bạn giảm thời gian bố cục. Trước đây, việc này được thực hiện bằng cách sử dụng các thuộc tính HTML, nhưng giờ đây tiêu chuẩn yêu cầu văn bản phải được căn chỉnh bằng các biểu định kiểu. Không giống như các khối mà bạn cần thay đổi lề, trong CSS, việc căn giữa văn bản được thực hiện bằng một dòng duy nhất:

căn chỉnh văn bản:giữa;

Tài sản này được thừa kế và truyền lại từ cha mẹ cho tất cả con cháu. Không chỉ ảnh hưởng đến văn bản mà còn ảnh hưởng đến các yếu tố khác. Để làm điều này, chúng phải ở dạng nội tuyến (ví dụ: span) hoặc khối nội tuyến (bất kỳ khối nào có thuộc tính display: block được đặt). Tùy chọn thứ hai cũng cho phép bạn thay đổi chiều rộng và chiều cao của phần tử và điều chỉnh mức thụt lề linh hoạt hơn.

Thông thường trên các trang, căn chỉnh được gán cho chính thẻ đó. Điều này ngay lập tức làm mất hiệu lực mã vì W3C đã không dùng thuộc tính căn chỉnh nữa. Sử dụng nó trên một trang không được khuyến khích.

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.

Đôi khi không cần căn chỉnh trung tâm CSS, nhưng bạn cần đặt hai khối cạnh nhau: một khối ở cạnh trái, khối kia ở bên phải. Với mục đích này, có một thuộc tính float, có thể nhận một trong ba giá trị: trái, phải hoặc không. Giả sử bạn có hai khối cần được đặt cạnh nhau. Sau đó, mã sẽ như thế này:

.left (float:left;)
.right(float:right)

Nếu cũng có khối thứ ba, khối này phải nằm dưới hai khối đầu tiên (ví dụ: chân trang), thì nó cần được cung cấp thuộc tính clear:

.left (float:left;)
.right(float:right)
chân trang (rõ ràng: cả hai)

Thực tế là các khối có các lớp trái và phải nằm ngoài luồng chung, nghĩa là tất cả các phần tử khác đều bỏ qua sự tồn tại của các phần tử được căn chỉnh. Thuộc tính clear:both cho phép chân trang hoặc bất kỳ khối nào khác nhìn thấy các phần tử đã rơi ra khỏi luồng và cấm thả nổi ở cả bên trái và bên phải. Do đó, trong ví dụ của chúng tôi, phần chân trang sẽ di chuyển xuống.

Đôi khi việc căn chỉnh tâm bằng các phương pháp CSS là không đủ, bạn cũng cần thay đổi vị trí dọc của khối con. Bất kỳ phần tử khối nội tuyến hoặc khối nội tuyến nào cũng có thể được lồng ở cạnh trên hoặc dưới, ở giữa phần tử cha hoặc ở bất kỳ vị trí nào. Thông thường, khối cần được căn chỉnh về giữa; đối với điều này, thuộc tính căn chỉnh dọc được sử dụng. Giả sử có hai khối, một khối lồng vào nhau. Trong trường hợp này, khối bên trong là phần tử khối nội tuyến (hiển thị: khối nội tuyến). Bạn cần căn chỉnh khối con theo chiều dọc:

căn chỉnh trên cùng - .child(vertical-align:top);
căn giữa - .child(vertical-align:middle);
căn lề dưới - .child(vertical-align:bottom);

Cả căn chỉnh văn bản và căn chỉnh dọc đều không ảnh hưởng đến các phần tử khối.

Đôi khi việc căn giữa một div bằng CSS có thể gây ra một chút rắc rối. Ví dụ: khi sử dụng float: giả sử có ba khối: .first, .second và .third. Khối thứ hai và thứ ba nằm ở khối thứ nhất. Phần tử có lớp thứ hai được căn trái và khối cuối cùng được căn phải. Sau khi chững lại, cả hai đều rơi ra khỏi dòng chảy. Nếu phần tử cha không được đặt chiều cao (ví dụ: 30em), thì nó sẽ không còn kéo dài theo chiều cao của các khối con của nó nữa. Để tránh lỗi này, hãy sử dụng “spacer” - một khối đặc biệt nhìn thấy .second và .third. Mã CSS:

.second(float:left)
.third(float:right)
.clearfix(height:0; clear: cả hai;)

Lớp giả:after thường được sử dụng, điều này cũng cho phép bạn trả các khối về vị trí của chúng bằng cách tạo một miếng đệm giả (trong ví dụ, một div có lớp chứa nằm bên trong.first và contains.left và.right) :

.left(float:left)
.right(float:right)
.container:after(content:""; display:table; clear:both;)

Các tùy chọn trên là phổ biến nhất, mặc dù có một số biến thể. Bạn luôn có thể tìm ra cách đơn giản và thuận tiện nhất để tạo một miếng đệm giả thông qua thử nghiệm.

Một vấn đề khác mà các nhà thiết kế bố cục thường gặp phải là việc căn chỉnh các phần tử khối nội tuyến. Một khoảng trống sẽ tự động được thêm vào sau mỗi khoảng trống. Thuộc tính lề, được đặt thành thụt lề âm, sẽ giúp giải quyết vấn đề này. Có các phương pháp khác được sử dụng ít thường xuyên hơn: ví dụ: về 0. Trong trường hợp này, cỡ chữ: 0 được ghi trong thuộc tính của phần tử cha. Nếu có văn bản bên trong các khối thì kích thước phông chữ được yêu cầu đã được trả về trong thuộc tính của các phần tử khối nội tuyến. Ví dụ: cỡ chữ: 1em. Phương pháp này không phải lúc nào cũng thuận tiện, vì vậy tùy chọn thụt lề bên ngoài thường được sử dụng nhiều hơn.

Các khối căn chỉnh cho phép bạn tạo các trang đẹp và tiện dụng: điều này bao gồm bố cục của bố cục tổng thể, sắp xếp sản phẩm trong các cửa hàng trực tuyến và ảnh trên trang web danh thiếp.

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á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).

Đô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.

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 gán cùng một giá trị cho tất cả các thuộc tính (“top”, “right”, “bottom”, “left”) của khối bên trong, cũng như “margin: auto”.

*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).

Để 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 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.

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.

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.

Đâ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 chỉnh theo chiều dọc có nhiều vấn đề hơn - rõ ràng, đ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.

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.

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ó.

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.

Thuộc tính "vertical-align" cũng ảnh hưởng đến các ô của bảng. Với giá trị được đặt thành "giữa", nội dung bên trong ô sẽ được căn chỉnh về giữa. Tất nhiê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, bạn có thể mô phỏng nó 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.

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.

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.

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ó.

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!