CSS: Căn chỉnh văn bản theo chiều dọc. Căn giữa một div và các điểm tinh tế định vị khác
Thông thường trong bố cục, nó được yêu cầu 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 báo với nhiều phương pháp căn giữa, để mọi thứ nằm trong tầm tay ở một nơi.
Căn chỉnh theo chiều ngang
margin: auto
Căn chỉnh theo chiều ngang với lề được sử dụng khi biết chiều rộng của phần tử căn giữa. Hoạt động cho các phần tử khối:
Elem (margin-left: auto; margin-right: auto; width: 50%;)
Việc chỉ định giá trị tự động của phần đệm bên phải và bên trái làm cho chúng bằng nhau, điều này căn giữa phần tử theo chiều ngang trong khối mẹ.
text-align: center
Phương pháp này thích hợp để căn giữa văn bản trong một khối. text-align: center:
Tôi căn giữa
vị trí và lề âm ở bên trái
Thích hợp cho các khối định tâm có chiều rộng đã biết. Chúng tôi đặt khối mẹ thành vị trí: so với vị trí so với nó, phần tử căn giữa thành vị trí: tuyệt đối, bên trái: 50% và một lề âm bên trái, có giá trị bằng một nửa chiều rộng của phần tử:
Tôi căn giữa
display: inline-block + text-align: center
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 một trình bao bọc mẹ. Ví dụ: đây là cách bạn có thể căn giữa menu ngang:
Căn chỉnh theo chiều dọc
chiều cao giữa các dòng
Để căn chỉnh một dòng văn bản, bạn có thể sử dụng các giá trị độ cao và khoảng cách dòng giống nhau cho khối mẹ. Thích hợp cho các nút, các mục menu, v.v.
Tôi được căn chỉnh theo chiều dọc
vị trí và tăng lợi nhuận âm
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à một lề âm lên bằng một nửa chiều cao của phần tử đang được căn chỉnh. Khối mẹ 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%;)
Do đó, sử dụng định vị và lề âm, bạn có thể căn giữa phần tử trên trang.
display: table-cell
Đối với căn chỉnh theo chiều dọc, thuộc tính display: table-cell được áp dụng cho phần tử, làm cho phần tử mô phỏng một ô trong bảng. Chúng tôi cũng đặt chiều cao và vertical-align: middle cho nó. Chúng tôi sẽ gói tất cả những thứ này trong một vùng chứa với thuộc tính dislpay: table; :
Tôi được căn chỉnh theo chiều dọc
Căn chỉnh động một phần tử trên trang
Chúng tôi đã xem xét các cách để căn chỉnh các phần tử trên một trang bằng cách sử dụng CSS. Bây giờ chúng ta hãy xem xét việc triển khai jQuery.
Hãy thêm jQuery vào 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ử hoạt động như một đối số cho hàm:
Hàm alignCenter (elem) (// mã ở đây)
Trong phần nội dung của hàm, hãy tính toán động và chỉ định tọa độ của tâm trang cho các thuộc tính CSS bên trái và trên cùng:
Hàm alignCenter (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 tôi lấy chiều rộng của tài liệu và trừ đi chiều rộng của phần tử, được chia đôi - đây sẽ là tâm ngang của trang. Dòng thứ hai làm tương tự, chỉ với chiều cao để căn chỉnh theo chiều dọc.
Chức năng đã sẵn sàng, nó vẫn còn để treo nó trên sự sẵn sàng của DOM và các sự kiện thay đổi kích thước cửa sổ:
$ (function () (// gọi hàm căn giữa khi DOM đã sẵn sàng alignCenter ($ (elem))); // gọi hàm khi cửa sổ được thay đổi kích thước $ (window) .resize (function () (alignCenter ($ ( elem));)) // chức năng căn giữa phần tử chức năng alignCenter (elem) (elem.css ((// tính toán tọa độ bên trái và trên cùng bên trái: ($ (window) .width () - elem.width ()) / 2 + "px", trên cùng: ($ (window) .height () - elem.height ()) / 2 + "px"))))))
Ứng dụng của Flexbox
Các tính năng CSS3 mới như Flexbox đang dần trở thành xu hướng phổ biến. Công nghệ này giúp tạo ra đánh dấu mà không cần sử dụng phao, định vị, v.v. Nó cũng có thể được sử dụng để căn giữa các phần tử. Ví dụ: hãy áp dụng Flexbox cho phần tử .wrapper chính và căn giữa nội dung bên trong:
Wrapper (display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; height: 500px; width: 500px;) .wrapper .content (margin: tự động; / * lề: 0 tự động; chỉ ngang * / / * lề: tự động 0; chỉ dọc * /)
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ờ không chỉ hoạt động đối với căn chỉnh theo chiều ngang mà còn đối với căn chỉnh theo chiều dọc. Và không có chiều rộng / chiều cao đã biết.
Tài nguyên liên quan
Giúp dự án
Tôi nghĩ rằng nhiều người trong số các bạn đã làm công việc bố trí đã 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ào phát sinh khi căn chỉnh một phần tử vào trung tâm.
Có, đối với căn chỉnh theo chiều dọc trong CSS, có một thuộc tính căn chỉnh theo chiều dọc đặc biệt với nhiều giá trị. Tuy nhiên, trong thực tế nó không hoạt động như mong đợi. Hãy cố gắng tìm ra điều này.
Hãy so sánh các cách tiếp cận sau đây. Căn chỉnh với:
- những cái bàn,
- thụt vào,
- chiều cao giữa các dòng ,
- kéo dài,
- lợi nhuận âm,
- biến đổi ,
- yếu tố giả
- hộp uốn.
Có hai phần tử div, với một phần tử được lồng trong phần tử kia. Hãy cung cấp cho chúng các lớp thích hợp - bên ngoài và bên trong.
Mục đí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.
Để bắt đầu, hãy xem xét trường hợp khi kích thước của khối bên ngoài và bên trong đã biết. Hãy thêm 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 dòng hoặc khối nội tuyến.
Hãy đặt kích thước cho các khối cũng như màu nền để xem đường viền của chúng.
Bên ngoài (width: 200px; height: 200px; text-align: center; vertical-align: middle; background-color: #ffc;) .inner (display: inline-block; width: 100px; height: 100px; background-color : #fcc;)
Sau khi áp dụng các kiểu, chúng ta sẽ thấy rằng 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? Thực tế là thuộc tính căn chỉnh theo chiều dọc ảnh hưởng đến việc căn chỉnh bản thân yếu tố, 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 làm gì cả. 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ì các khối nội tuyến được căn chỉnh theo chiều dọc với các khối lân cận 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. Chúng ta hãy xem xét kỹ hơn từng người trong số họ dưới đây.
Căn chỉnh với một bảng
Giải pháp đầu tiên được nghĩ đến là thay thế khối bên ngoài bằng một bảng một ô. Trong trường hợp này, 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 của ngữ nghĩa, việc sử dụng các bảng để căn chỉnh là sai. Điểm bất lợi thứ hai là để tạo một bảng, bạn cần thêm một phần tử nữa 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ế các 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 bảng với tất cả các hệ quả tiếp theo.
Căn chỉnh với đệm
Nếu chiều cao của khối bên trong và khối bên ngoài đã biết, thì có thể đặt căn chỉnh bằng cách sử dụng đệm dọc của khối bên trong, sử dụng công thức: (H bên ngoài - H bên trong) / 2.Outer (height: 200px;) .inner (height: 100px; margin: 50px 0;)
http://jsfiddle.net/c1bgfffq/6/
Nhược điểm của giải pháp là nó chỉ áp dụng được 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 với 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 đến 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.Outer (height: 200px; line-height: 200px;) .inner (white-space: nowrap; Over: hidden;)
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 ghi đè giá trị chiều cao dòng cho khối bên trong và thêm hiển thị quy tắc: inline-block và vertical-align: middle.
Outer (height: 200px; line-height: 200px;) .inner (line-height: normal; display: inline-block; vertical-align: middle;)
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 căng
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.Đối với đ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 giá trị thành tự động cho phần đệm dọc của khối bên trong.
http://jsfiddle.net/c1bgfffq/4/
Bản chất của kỹ thuật này là việc đặt chiều cao cho một khối được kéo dài và có vị trí tuyệt đối khiến trình duyệt tính toán phần đệm dọc theo tỷ lệ bằng nhau nếu giá trị của chúng được đặt thành tự động.
Căn chỉnh với lề đầu â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ư phần trước, nó được áp 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.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 vị trí tuyệt đối. Sau đó, bạn cần di chuyển hộp bên trong xuống một nửa chiều cao của đỉnh hộp bên ngoài: 50% và di chuyển nó lên một nửa chiều cao của chính nó margin-top: -H inner / 2.
Bên ngoài (vị trí: tương đối;) .inner (chiều cao: 100px; vị trí: tuyệt đối; đầu: 50%; margin-top: -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 nó có thể được áp dụng khi chiều cao của khối bên trong không xác định. Trong trường hợp này, thay vì đặt phần đệm phủ định theo pixel, bạn có thể sử dụng thuộc tính biến đổi và nâng hộp bên trong lên bằng cách sử dụng hàm translateY và giá trị -50%.Outer (vị trí: tương đối;) .inner (vị trí: tuyệt đối; trên cùng: 50%; chuyển đổi: dịchY (-50%);)
http://jsfiddle.net/c1bgfffq/9/
Tại sao trong phương pháp trước, không thể đặt giá trị dưới dạng phần trăm? Vì các giá trị phần trăm của thuộc tính margin có liên quan đến phần tử mẹ, 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 tôi sẽ cần nâng hộp bên trong lên một nửa chiều cao của chính nó. Đây chính xác là những gì thuộc tính biến đổi dành cho.
Nhược điểm của phương pháp này là không áp dụng được nếu khối bên trong có định vị tuyệt đối.
Căn chỉnh với Flexbox
Cách hiện đại nhất để căn chỉnh theo chiều dọc là sử dụng Bố cục Hộp linh hoạt (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 phần tử trên trang, đặt 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 cần được đặt thành margin: auto. Và tất cả! Đẹp chứ?
Bên ngoài (display: flex; width: 200px; height: 200px;) .inner (width: 100px; margin: auto;)
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.
Chọn cách nào?
Nó là cần thiết để tiếp tục phát biểu của vấn đề:- Để căn chỉnh theo chiều dọc của văn bản, tốt hơn là sử dụng đệm dọc hoặc thuộc tính chiều cao dòng.
- Đối với các phần tử được định vị tuyệt đối với chiều cao đã biết (chẳng hạn như các biểu tượng), phương pháp tiếp cận lề đầu phủ định là lý tưởng.
- Đối với các trường hợp phức tạp hơn mà chiều cao của khối không xác định, nên sử dụng phần tử giả hoặc thuộc tính biến đổi.
- Vâng, nếu bạn đủ may mắn để không cần hỗ trợ các phiên bản IE cũ hơn, thì tất nhiên Flexbox sẽ tốt hơn.
Thẻ: Thêm thẻ
Nói chung, căn giữa các phần tử HTML trên một trang không phải là một nhiệm vụ khó khăn. Trong một số trường hợp ... các nhà phát triển web phải vắt óc để tìm ra giải pháp tốt nhất.
Căn giữa các yếu tố theo chiều ngang không quá khó, theo chiều dọc đã đặt ra câu hỏi, nhưng việc kết hợp chúng nói chung có thể gây nhầm lẫn. Trong thời đại của thiết kế đáp ứng, chúng ta hiếm khi biết kích thước chính xác của các yếu tố nhất định. Tôi đã đếm được 6 cách khác nhau để căn giữa các phần tử bằng CSS. Hãy bắt đầu với những ví dụ đơn giản và kết thúc với những ví dụ phức tạp hơn. Nó sẽ hoạt động với cùng một mã HTML:
Căn giữa theo chiều ngang với căn chỉnh văn bản
Đôi khi, giải pháp đơn giản nhất là tốt nhất:
Div.center (text-align: center; background: hsl (0, 100%, 97%);) div.center img (width: 33%; height: auto;)
Không có căn giữa theo chiều dọc ở đây: đối với điều này, bạn sẽ cần thêm thuộc tính margin-top và margin-bottom vào div.
Căn giữa với lề: auto
Một giải pháp khác để căn giữa theo chiều ngang:
Div.center (background: hsl (60, 100%, 97%);) div.center img (display: block; width: 33%; height: auto; margin: 0 auto;)
Lưu ý rằng đối với phương pháp này, bạn cần đặt thuộc tính display: block.
Căn giữa với ô bảng
Bằng cách sử dụng display: table-cell, chúng ta có thể đảm bảo rằng phần tử được căn giữa theo cả chiều dọc và chiều ngang. Nhưng ở đây chúng ta cần lồng hình ảnh vào một phần tử div khác.
Căn giữa (display: table; background: hsl (120, 100%, 97%); width: 100%;) .center-core (display: table-cell; text-align: center; vertical-align: middle;) ) .center-core img (width: 33%; height: auto;)
Để mọi thứ hoạt động chính xác, div cần được đặt thành width: 100%. Để căn giữa phần tử theo chiều dọc, chúng tôi sẽ sử dụng các phương pháp tiêu chuẩn bằng cách thiết lập chiều cao. Hoạt động ở mọi nơi, kể cả IE8 +.
Căn giữa tuyệt đối
Một giải pháp rất thú vị. Nó bao gồm thực tế là bạn cần đặt chiều cao của thùng chứa bên ngoài:
Căn chỉnh tuyệt đối (vị trí: tương đối; tối thiểu-chiều cao: 500px; nền: hsl (200, 100%, 97%);). : auto; margin: auto; position: tuyệt đối; top: 0; left: 0; bottom: 0; right: 0;)
Căn giữa với dịch
Giải pháp mới sử dụng biến đổi CSS. Cung cấp cả căn giữa theo chiều ngang và dọc:
Căn giữa (nền: hsl (180, 100%, 97%); vị trí: tương đối; chiều cao tối thiểu: 500px;) .center img (vị trí: tuyệt đối; trên cùng: 50%; bên trái: 50%; biến đổi: dịch (-50 %, -50%); chiều rộng: 30%; chiều cao: tự động;)
Có một số nhược điểm:
- Thuộc tính chuyển đổi CSS yêu cầu tiền tố trình duyệt
- Không hoạt động trong các phiên bản IE cũ hơn (8 trở xuống)
- Hộp đựng bên ngoài cần phải có chiều cao.
- Nếu có văn bản bên trong vùng chứa, thì nó có thể bị mờ một chút.
Căn giữa với chế độ xem hiển thị linh hoạt
Có lẽ là lựa chọn dễ dàng nhất.
Căn giữa (nền: hsl (240, 100%, 97%); display: flex; justify-content: center; align-items: center;) .center img (width: 30%; height: auto;)
Không hoạt động trong tất cả các phiên bản IE (mặc dù bạn có thể an toàn bằng cách sử dụng thêm display: table-cell). CSS đầy đủ:
Trung tâm (nền: hsl (240, 100%, 97%); hiển thị: -webkit-box; / * Safari, iOS 6 trở về trước; Android, WebKit cũ hơn * / display: -moz-box; / * Firefox (có thể và fail) * / display: -ms-flexbox; / * IE 10 * / display: -webkit-flex; / * Chrome 21+ * / display: flex; / * Opera 12.1+, Firefox 22+ * / -webkit- box -align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz - box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;)
Căn giữa với calc
Trong một số trường hợp, phương pháp này linh hoạt hơn so với sử dụng flexbox:
Căn giữa (nền: hsl (300, 100%, 97%); tối thiểu-chiều cao: 600px; vị trí: tương đối;) .center img (chiều rộng: 40%; chiều cao: tự động; vị trí: tuyệt đối; đầu: calc (50% - 20%); trái: calc (50% - 20%);)
Nó rất đơn giản, chúng tôi có thể tính toán kích thước chúng tôi cần tùy thuộc vào toàn bộ bố cục trang. Các phép tính rất đơn giản, 50% là điểm trung tâm của vùng chứa, nhưng nhiệm vụ của chúng ta là đặt góc trên bên trái của hình ảnh tại các tọa độ này. Tiếp theo, trừ một nửa chiều cao và chiều rộng của hình ảnh. Công thức là:
Top: calc (50% - (40% / 2)); trái: calc (50% - (40% / 2));
Trong thực tế, bạn có thể thấy rằng phương pháp này hoạt động tốt nếu chúng ta biết kích thước của các phần tử:
Căn giữa img (chiều rộng: 500px; chiều cao: 500px; vị trí: tuyệt đối; top: calc (50% - (300px / 2)); left: calc (50% - (300px - 2));)
Phương pháp này được hỗ trợ bởi Firefox, bắt đầu từ phiên bản 4, bạn sẽ cần đăng ký tiền tố trình duyệt. Không hoạt động trong IE 8. Mã đầy đủ:
Giữa img (chiều rộng: 40%; chiều cao: tự động; vị trí: tuyệt đối; trên cùng: -webkit-calc (50% - 20%); trái: -webkit-calc (50% - 20%); trên cùng: -moz-calc (50% - 20%); trái: -moz-calc (50% - 20%); trên: calc (50% - 20%); trái: calc (50% - 20%);)
Tôi hy vọng những phương pháp này đủ để bạn tìm ra giải pháp tốt nhất cho mình.
Khi bố trí một trang, thường phải thực hiện căn giữa theo cách 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ố trí nào.
Căn giữa văn bản
Thông thường, vì mục đích trang trí, bạn muốn đặt căn chỉnh 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, điều này được thực hiện bằng cách sử dụng các thuộc tính HTML, nhưng bây giờ tiêu chuẩn yêu cầu văn bản phải được căn chỉnh bằng cách sử dụng các biểu định kiểu. Không giống như các khối cần thay đổi lề, trong CSS, căn chỉnh văn bản được căn giữa bằng một dòng duy nhất:
- text-align: center;
Tài sản này được thừa kế và truyền từ cha mẹ cho tất cả các con. 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 được điều này, chúng phải được inline (ví dụ: span) hoặc inline-block (bất kỳ khối nào có bộ thuộc tính display: block). 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ử, điều chỉnh thụt lề linh hoạt hơn.
Thông thường, trên các trang, căn chỉnh được quy cho chính thẻ. Điều này ngay lập tức làm cho mã không hợp lệ, vì W3C đã không dùng thuộc tính align. 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ới trung tâm
Nếu bạn cần căn giữa một div, CSS có một cách khá tiện dụng: sử dụng lề. Có thể đặt thụt lề 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 nhận các giá trị 0 (thụt lề dọc) và tự động (thụt lề ngang tự động):
- margin: 0 auto;
Bây giờ tùy chọn này được công nhận là hoàn toàn hợp lệ. Sử dụng lề cũng cho phép bạn đặt căn chỉnh của 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 phần tử trên trang.
Căn chỉnh khối sang trái hoặc phải
Đôi khi căn giữa theo cách CSS là không bắt buộc, 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. Để làm điều này, có một thuộc tính float, có thể nhận một trong ba giá trị: left, right hoặc none. 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ì khối này cần đặt thuộc tính clear:
- .left (float: left;)
- .right (float: right)
- footer (rõ ràng: cả hai)
Thực tế là các khối có các lớp bên trái và bên phải nằm ngoài quy trình chung, tức 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 footer 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à vô hiệu hóa gói (float) ở cả bên trái và bên phải. Do đó, trong ví dụ của chúng tôi, footer sẽ di chuyển xuống dưới.
Căn chỉnh theo chiều dọc
Có những trường hợp đặt căn giữa theo các cách 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ử nội dòng hoặc khối nội tuyến nào đều có thể nằm ngang cạnh trên cùng hoặc dưới cùng, nằm giữa phần tử mẹ hoặc ở một vị trí tùy ý. Thông thường, một khối cần được căn giữa, được thực hiện bằng cách sử dụng thuộc tính vertical-align. Giả sử có hai khối, một khối lồng vào khối kia. Trong trường hợp này, khối bên trong là một phần tử khối nội tuyến (display: inline-block). Bạn cần căn chỉnh khối con theo chiều dọc:
- căn chỉnh hàng đầu - .child (vertical-align: top);
- căn chỉnh giữa - .child (vertical-align: giữa);
- căn chỉnh dưới cùng - .child (vertical-align: bottom);
Các phần tử cấp khối không bị ảnh hưởng bởi căn chỉnh văn bản hoặc căn chỉnh dọc.
Các vấn đề có thể xảy ra với các khối được căn chỉnh
Đôi khi căn giữa một div theo cách CSS có thể gây ra một số vấn đề nhỏ. 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 trong khối đầu tiên. 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 căn chỉnh, cả hai đều rơi ra khỏi dòng suối. Nếu phần tử mẹ không có chiều cao được đặt (ví dụ: 30em), thì phần tử này sẽ không kéo dài đến chiều cao của các khối con nữa. Để tránh lỗi này, họ sử dụng một "spacer" - một khối đặc biệt nhìn thấy .second và .third. Mã CSS:
- .second (float: left)
- .third (float: right)
- .clearfix (chiều cao: 0; rõ ràng: cả hai;)
Lớp: sau lớp giả thường được sử dụng, điều này cũng cho phép bạn đặt các khối trở lại vị trí bằng cách tạo một khoảng đệm giả (trong ví dụ, div có lớp vùng 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 thấy cách dễ nhất 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à sự liên kết của các phần tử khối nội tuyến. Một khoảng trống được tự động thêm vào sau mỗi chúng. Thuộc tính ký quỹ, được đặt ở mức ký quỹ âm, sẽ giúp đối phó với điều này. Có những cách khác ít được sử dụng hơn nhiều: ví dụ: zeroing Trong trường hợp này, font-size: 0 được viết trong các thuộc tính của phần tử mẹ. Nếu có văn bản bên trong các khối, thì kích thước phông chữ cần thiết đã được trả về trong thuộc tính của các phần tử khối nội tuyến. Ví dụ: font-size: 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 có thụt lề bên ngoài thường được sử dụng hơn nhiều.
Các khối căn chỉnh cho phép bạn tạo các trang đẹp và có chức năng: đây là cách sắp xếp bố cục chung, vị trí của hàng hóa trong cửa hàng trực tuyến và ảnh trên trang danh thiếp.
Bố cục và căn chỉnh cho chính giữa các trang của trang web là một vấn đề sáng tạo và thường gây khó khăn cho người mới bắt đầu. Vì vậy, chúng ta hãy xem làm thế nào để làm điều đó. Giả sử chúng ta muốn tạo một trang với cấu trúc sau:
Trang của chúng ta bao gồm bốn khối: header (đầu trang), menu (menu), content (nội dung) và cuối trang (footer). Để căn giữa trang, chúng tôi sẽ đặt bốn hộp này trong một hộp chính:
Tiêu đề trang web
Các nội dung
Cuối trang web
Về ví dụ của cấu trúc này, chúng tôi sẽ xem xét một số tùy chọn.
Cách bố trí và định tâm của vị trí cao su
Khi bố trí một vị trí cao su, đơn vị đo lường chính được sử dụng là -%, vì vị trí đó phải trải dài theo chiều rộng và chiếm hết không gian trống.
Do đó, chiều rộng của khối "đầu trang" và "chân trang" sẽ bằng 100% chiều rộng màn hình. Đặt chiều rộng của khối "menu" là 30% và đặt khối "nội dung" bên cạnh khối "menu", tức là nó phải có lề trái (margin-left) bằng chiều rộng của khối "menu", tức là ba mươi%.
Để khối "menu" và "nội dung" nằm cạnh nhau, chúng ta hãy tạo khối "menu" nổi và đẩy nó sang cạnh trái. Chúng tôi cũng sẽ đặt màu nền cho các khối của chúng tôi. Bây giờ chúng ta hãy viết tất cả những điều này vào một style sheet (trong trang style.css)
#header (background: # 3e4982; width: 100%; height: 110px; text-align: center; color: #FFFFFF; font-size: 24px; padding-top: 40px;) #menu (background: # 6173cb; float : left; width: 30%; height: 300px; text-align: center; color: #FFFFFF; font-size: 18px; padding-top: 10px;) #content (background: #ffffff; margin-left: 30% ; height: 300px; text-align: center;) #footer (background: # 3e4982; clear: both; width: 100%; height: 50px; text-align: center; color: #FFFFFF; font-size: 14px; padding-top: 10px;)
Chiều cao của các khối được đặt có điều kiện để kết quả được hiển thị. Xem trang của chúng tôi trong trình duyệt:
Nếu bạn thay đổi kích thước cửa sổ trình duyệt, chiều rộng của tất cả các khối sẽ thay đổi. Điều này không phải lúc nào cũng thuận tiện, bởi vì. khi kéo căng khối menu, một khoảng trống xuất hiện. Do đó, chiều rộng của khối "menu" thường được cố định hơn, hãy làm theo cách đó. Để thực hiện việc này, hãy thay thế các giá trị của các thuộc tính tương ứng trong biểu định kiểu:
... #menu (background: # 6173cb; float: left; width: 200px; height: 300px;) #content (background: #ffffff; margin-left: 200px; height: 300px;) ...
Bây giờ trang của chúng tôi trải dài một cách tự nhiên hơn. Với bố cục linh hoạt, các trang chiếm toàn bộ chiều rộng của màn hình, do đó không cần căn giữa trang.
Nhưng nếu muốn, bạn có thể đảm bảo rằng trang của mình có các thụt lề bằng nhau ở bên trái và bên phải màn hình. Để thực hiện việc này, bạn cần thêm một kiểu vào khối "chính", là vùng chứa cho tất cả các khối khác:
Bây giờ trang của chúng tôi trông như thế này:
Bố cục và căn giữa trang web, chiều rộng cố định
Trong trường hợp này, chúng tôi sẽ phải đặt kích thước cố định của các khối:
#main (width: 800px;) #header (background: # 3e4982; width: 800px; height: 150px; text-align: center; color: #FFFFFF; font-size: 24px; padding-top: 40px;) #menu (background: # 6173cb; float: left; width: 200px; height: 300px; text-align: center; color: #FFFFFF; font-size: 18px; padding-top: 10px;) #content (background: #ffffff; margin-left: 200px; height: 300px; text-align: center;) #footer (background: # 3e4982; clear: both; width: 800px; height: 50px; text-align: center; color: #FFFFFF; font- kích thước: 14px; padding-top: 10px;)
Bây giờ trang của chúng ta được ghim vào mép trái của màn hình.
Trong trường hợp này, việc căn chỉnh vào giữa các trang của trang web có thể được thực hiện như sau. Nhớ lại rằng trang của chúng tôi có thẻ "body", thẻ này cũng có thể được cung cấp chiều rộng và một số phần đệm.
Hãy làm điều này: đặt chiều rộng của thẻ "body" thành 800 pixel (như khối "chính") và thụt lề trái (padding-left) thành 50%. Sau đó, toàn bộ nội dung của khối "chính" sẽ được hiển thị ở phía bên phải của màn hình (tức là từ giữa sang bên phải):
Để khối "chính" của chúng ta nằm ở giữa màn hình, khối giữa của nó phải khớp với giữa thẻ "body". Những thứ kia. di chuyển khối "chính" sang bên trái một nửa kích thước của nó. Chiều rộng của khối "chính" là 800 pixel, vì vậy bạn cần đặt thuộc tính "margin-left: -400px" cho nó. Có, thuộc tính này có thể nhận các giá trị âm, trong trường hợp đó, lề trái bị giảm (tức là bị dịch chuyển sang trái). Và đó chính xác là những gì chúng ta cần.
Bây giờ biểu định kiểu trông như thế này:
body (width: 800px; padding-left: 50%;) #main (width: 800px; margin-left: -400px;) #header (background: # 3e4982; width: 800px; height: 150px; text-align: center ; color: #FFFFFF; font-size: 24px; padding-top: 40px;) #menu (background: # 6173cb; float: left; width: 200px; height: 300px; text-align: center; color: #FFFFFF; font-size: 18px; padding-top: 10px;) #content (background: #ffffff; margin-left: 200px; height: 300px; text-align: center;) #footer (background: # 3e4982; clear: both; width: 800px; height: 50px; text-align: center; color: #FFFFFF; font-size: 14px; padding-top: 10px;)
Và trang của chúng tôi trong trình duyệt được đặt chính xác ở giữa:
Trên thực tế, chúng tôi đã xem xét hai tùy chọn để căn giữa các trang của trang web, chúng không phải là một giáo điều. Bạn có thể thử nghiệm và đưa ra phiên bản của riêng mình, chỉ cần kiểm tra hoạt động của nó trong các trình duyệt khác nhau. Thật không may, những gì được hiển thị tốt trong FireFox hoặc Opera có thể hoàn toàn không thể hiểu được trong IE và ngược lại. Và điều này phải được ghi nhớ.
Chúc may mắn trong việc theo đuổi sáng tạo của bạn!