Căn giữa tất cả các div. Cách căn chỉnh văn bản trong HTML về giữa, chiều rộng và các cạnh của trang

Xin chào! Chúng tôi tiếp tục nắm vững những điều cơ bản của 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 HTML theo ba cách khác nhau. 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 các đoạn văn bản theo một cách khác, thì thay vì tham số “center”, hãy 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ó một cách khác để đạ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 tệp CSS đi kèm, nhập mã sau:

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 làm cho văn bản được că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 mình được xếp hạng tốt trên các 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 xem xét cách tiếp cận tích hợp để phát triển 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 hoặc 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.

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:

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

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à điều đáng tiếc: 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ữ!

Thẻ nội tuyến là một thùng chứa có hình thức không làm cho nội dung được chuyển sang một 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.

là thẻ khối. 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 ở trên cùng một dòng.

Thùng đựng hàng thuận tiện sử dụng khi chỉ định một phần văn bản có định dạng đặc biệt (đánh dấu nó bằng màu sắc, phông chữ khác, 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, thuộc tính 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 ta đã 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 ta để 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:

Đố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 thứ 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. Bạn không thể làm điều này nếu không có kiến ​​thức về JavaScript.
• 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 đó không áp dụng được trong trường hợp chung.
• 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 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 có 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 diễn giải 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:

Đố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 các 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à: cho tất cả các 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%; )

Do đó, 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à thao tác cuối cùng trên span container đã đặ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 một nhận xét có điều kiện; không phải vô ích mà chúng ta đã làm quen với 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(hiển thị: ô bảng; căn chỉnh dọc: giữa; chiều rộng: 500px; chiều cao: 500px; vị trí: tương đối; tràn: ẩn; đường viền: 1px màu đen đậm; )

Tôi xin lỗi, tôi quên đề cập đến một điểm quan trọng. 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 như một 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 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.

Để biết thêm thông tin về căn chỉnh theo chiều dọc của khối có chiều cao thay đổi, hãy xem .

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 khối bên trong để gán cùng một giá trị, 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).

.example-wrapper2 ( vị trí : tương đối ; chiều cao : 250px ; nền : url(space.jpg) ; ) .cat-king ( chiều rộng : 200px ; chiều cao : 200px ; vị trí : tuyệt đối ; đỉnh : 0 ; trái : 0 ; đáy : 0 ; phải : 0 ; lề : auto ; nền : url(king.png) ; )

Căn chỉnh theo chiều ngang

Căn chỉnh bằng cách sử dụng "text-align: center"

Để căn chỉnh văn bản trong một khối, có một thuộc tính đặc biệt " 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

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.

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 dọc : giữa ; nền : #FFFFAF2 ; màu sắc : #FF9B00 ; căn chỉnh văn bản : giữa ; )

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

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

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. Với giá trị được đặt thành "ở giữa", nội dung bên trong ô được căn chỉnh về giữa. Tất nhiên, bố cục bảng ngày nay được coi là cổ điển, 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; hiển thị: khối; lề: 0 tự động; )

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

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

Và đối với các phần tử nội tuyến, bạn có thể sử dụng " 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 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 căn giữa nội dung sẽ không còn là vấn đề nữa!

CSS

HTML

Tôi nghĩ nhiều người trong số các bạn từng làm việc với bố cục đã gặp phải nhu cầu căn chỉnh các phần tử theo chiều dọc và biết những khó khăn nảy sinh khi căn chỉnh một phần tử vào giữa.

Có, có một thuộc tính căn chỉnh theo chiều dọc đa giá trị đặc biệt trong CSS để căn chỉnh theo chiều dọc. Tuy nhiên, trên thực tế nó không hề hoạt động như mong đợi. Hãy thử tìm hiểu điều này.

Hãy so sánh các phương pháp sau. Căn chỉnh bằng cách sử dụng:

• những cái bàn,
• thụt đầu dòng,
• chiều cao giữa các dòng
• kéo dài,
• biên độ âm,
• biến đổi
• phần tử giả
• flexbox.

Để minh họa, hãy xem xét ví dụ sau.

Có hai phần tử div, trong đó một phần tử được lồng vào phần tử kia. Hãy cung cấp cho họ các lớp tương ứng - bên ngoài và bên trong.

Thử thách là căn chỉnh phần tử bên trong với tâm của phần tử bên ngoài.

Đầu tiên, hãy xem xét trường hợp khi kích thước của khối bên ngoài và khối bên trong được biết đến. Hãy thêm quy tắc display: inline-block vào phần tử bên trong và text-align: center và Vertical-align: middle vào phần tử bên ngoài.

Hãy nhớ rằng căn chỉnh chỉ áp dụng cho các phần tử có chế độ hiển thị nội tuyến hoặc khối nội tuyến.

Hãy đặt kích thước của các khối cũng như màu nền để chúng ta có thể nhìn thấy đường viền của chúng.

Bên ngoài ( chiều rộng: 200px; chiều cao: 200px; căn chỉnh văn bản: giữa; căn chỉnh dọc: giữa; màu nền: #ffc; ) .inner ( hiển thị: khối nội tuyến; chiều rộng: 100px; chiều cao: 100px; màu nền : #fcc; )
Sau khi áp dụng các kiểu, chúng ta sẽ thấy khối bên trong được căn chỉnh theo chiều ngang chứ không phải theo chiều dọc:
http://jsfiddle.net/c1bgfffq/

Tại sao nó lại xảy ra? Vấn đề là thuộc tính căn chỉnh dọc ảnh hưởng đến việc căn chỉnh chính phần tử đó chứ không phải nội dung của nó(trừ khi nó được áp dụng cho các ô của bảng). Do đó, việc áp dụng thuộc tính này cho phần tử bên ngoài không tạo ra bất cứ thứ gì. Hơn nữa, việc áp dụng thuộc tính này cho một phần tử bên trong cũng sẽ không có tác dụng gì, vì các khối nội tuyến được căn chỉnh theo chiều dọc so với các khối liền kề và trong trường hợp của chúng ta, chúng ta có một khối nội tuyến.

Có một số kỹ thuật để giải quyết vấn đề này. Dưới đây chúng ta sẽ xem xét kỹ hơn về từng người trong số họ.

Căn chỉnh bằng bảng

Giải pháp đầu tiên bạn nghĩ đến là thay thế khối bên ngoài bằng một bảng gồm một ô. Trong trường hợp này, việc căn chỉnh sẽ được áp dụng cho nội dung của ô, tức là cho khối bên trong.

http://jsfiddle.net/c1bgfffq/1/

Nhược điểm rõ ràng của giải pháp này là, từ quan điểm ngữ nghĩa, việc sử dụng bảng để căn chỉnh là không chính xác. Nhược điểm thứ hai là việc tạo bảng yêu cầu thêm một phần tử khác xung quanh khối bên ngoài.

Điểm trừ đầu tiên có thể được loại bỏ một phần bằng cách thay thế thẻ table và td bằng div và thiết lập chế độ hiển thị bảng trong CSS.

.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Tuy nhiên, khối bên ngoài vẫn sẽ là một cái bàn với mọi hậu quả sau đó.

Căn chỉnh bằng cách sử dụng thụt lề

Nếu biết chiều cao của khối bên trong và bên ngoài, thì có thể đặt căn chỉnh bằng cách sử dụng thụt lề dọc của khối bên trong bằng công thức: (H bên ngoài – H bên trong) / 2.

Bên ngoài ( chiều cao: 200px; ) . bên trong ( chiều cao: 100px; lề: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

Nhược điểm của giải pháp này là nó chỉ được áp dụng trong một số trường hợp hạn chế khi đã biết chiều cao của cả hai khối.

Căn chỉnh bằng chiều cao dòng

Nếu bạn biết rằng khối bên trong không được chiếm nhiều hơn một dòng văn bản thì bạn có thể sử dụng thuộc tính line-height và đặt nó bằng chiều cao của khối bên ngoài. Vì nội dung của khối bên trong không được bao bọc ở dòng thứ hai nên bạn cũng nên thêm các quy tắc khoảng trắng: nowrap và tràn: ẩn.

Bên ngoài ( chiều cao: 200px; chiều cao dòng: 200px; ) . bên trong ( khoảng trắng: nowrap; tràn: ẩn; )
http://jsfiddle.net/c1bgfffq/12/

Kỹ thuật này cũng có thể được sử dụng để căn chỉnh văn bản nhiều dòng nếu bạn xác định lại giá trị chiều cao dòng cho khối bên trong, đồng thời thêm các quy tắc display: inline-block và Vertical-align: middle.

Bên ngoài ( chiều cao: 200px; chiều cao dòng: 200px; ) .inner ( chiều cao dòng: bình thường; hiển thị: khối nội tuyến; căn chỉnh dọc: giữa; )
http://jsfiddle.net/c1bgfffq/15/

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

Căn chỉnh bằng cách sử dụng "kéo dài"

Phương pháp này có thể được sử dụng khi chưa biết chiều cao của khối bên ngoài nhưng đã biết chiều cao của khối bên trong.

Để làm điều này bạn cần:

1. đặt vị trí tương đối cho khối bên ngoài và định vị tuyệt đối cho khối bên trong;
2. thêm các quy tắc top: 0 và Bottom: 0 vào khối bên trong, do đó nó sẽ kéo dài đến toàn bộ chiều cao của khối bên ngoài;
3. đặt phần đệm dọc của khối bên trong thành tự động.

.outer ( vị trí: tương đối; ) .inner ( chiều cao: 100px; vị trí: tuyệt đối; trên cùng: 0; dưới cùng: 0; lề: tự động 0; )
http://jsfiddle.net/c1bgfffq/4/

Ý tưởng đằng sau kỹ thuật này là việc đặt chiều cao cho khối được kéo dài và được định vị tuyệt đối sẽ khiến trình duyệt tính toán phần đệm dọc theo tỷ lệ bằng nhau nếu nó được đặt thành auto .

Căn chỉnh với lề trên âm

Phương pháp này đã được biết đến rộng rãi và được sử dụng rất thường xuyên. Giống như cái trước, nó được sử dụng khi không biết chiều cao của khối bên ngoài nhưng đã biết chiều cao của khối bên trong.

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

Bên ngoài ( vị trí: tương đối; ) .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.

Căn chỉnh với biến đổi

Phương pháp này tương tự như phương pháp trước nhưng có thể được sử dụng khi không xác định được độ cao của dàn lạnh. Trong trường hợp này, thay vì đặt khoảng đệm pixel âm, bạn có thể sử dụng thuộc tính biến đổi và di chuyển khối bên trong lên bằng cách sử dụng hàm dịch Y và giá trị -50%.

Bên ngoài ( vị trí: tương đối; ) . bên trong ( vị trí: tuyệt đối; trên cùng: 50%; biến đổi: dịchY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Tại sao không thể đặt giá trị dưới dạng phần trăm trong phương pháp trước? Vì giá trị lề phần trăm được tính tương ứng với phần tử gốc nên giá trị 50% sẽ bằng một nửa chiều cao của hộp bên ngoài và chúng ta sẽ cần nâng hộp bên trong lên một nửa chiều cao của chính nó. Thuộc tính biến đổi là hoàn hảo cho việc này.

Nhược điểm của phương pháp này là không thể sử dụng nếu dàn lạnh có khả năng định vị tuyệt đối.

Căn chỉnh với Flexbox

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

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

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

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

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

Bạn cần bắt đầu từ tuyên bố vấn đề:

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

Từ tác giả: Tôi chào mừng bạn một lần nữa đến với các trang blog của chúng tôi. Trong bài viết hôm nay tôi muốn nói về các kỹ thuật căn chỉnh khác nhau có thể áp dụng cho cả khối và nội dung của chúng. Đặc biệt là cách căn chỉnh các khối trong css cũng như căn chỉnh văn bản.

Căn chỉnh các khối vào giữa

Trong CSS, việc căn giữa một khối rất dễ dàng. Đây là kỹ thuật được nhiều người biết đến nhất, nhưng trước hết tôi muốn nói về nó ngay bây giờ. Điều này có nghĩa là căn chỉnh căn giữa theo chiều ngang so với phần tử gốc. Nó được thực hiện như thế nào? Giả sử chúng ta có một vùng chứa và đối tượng thử nghiệm của chúng ta ở trong đó:

< div id = "wrapper" > < div id = "header" > < / div > < / div >

Giả sử rằng đây là tiêu đề trang web. Nó không trải dài trên toàn bộ chiều rộng của cửa sổ và chúng ta cần căn giữa nó. Chúng tôi viết như thế này:

#tiêu đề( chiều rộng / chiều rộng tối đa: 800px; lề: 0 tự động;

Chúng ta cần chỉ định chiều rộng chính xác hoặc tối đa, sau đó ghi lại thuộc tính chính - lề: 0 tự động. Nó đặt lề ngoài của tiêu đề của chúng ta, giá trị đầu tiên xác định lề trên và dưới và giá trị thứ hai xác định lề phải và trái. Giá trị auto yêu cầu trình duyệt tự động tính toán phần đệm ở cả hai bên để phần tử được căn giữa chính xác trên phần tử mẹ của nó. Thoải mái!

Căn chỉnh văn bản

Đây cũng là một kỹ thuật rất đơn giản. Để căn chỉnh tất cả các phần tử nội tuyến, bạn có thể sử dụng thuộc tính text-align và các giá trị của nó: left, right, center. Cái sau căn giữa văn bản, đó là những gì chúng ta cần. Bạn thậm chí có thể căn chỉnh ảnh theo cách tương tự vì theo mặc định, nó cũng là một thành phần nội tuyến.

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

Nhưng điều này phức tạp hơn. Theo mặc định, không có thuộc tính đơn giản, nổi tiếng nào có thể dễ dàng căn giữa văn bản theo chiều dọc trong vùng chứa khối. Tuy nhiên, có một số kỹ thuật mà các nhà thiết kế bố cục đã nghĩ ra trong nhiều năm qua.

Đặt chiều cao khối bằng cách sử dụng phần đệm. Cách này không phải là đặt chiều cao rõ ràng bằng cách sử dụng chiều cao mà là tạo chiều cao một cách giả tạo bằng cách sử dụng các phần đệm ở trên cùng và dưới cùng, các phần này phải giống nhau. Hãy tạo bất kỳ khối nào và viết các thuộc tính sau vào nó:

div(nền: #ccc; phần đệm: 30px 0; )

div( nền : #ccc; phần đệm: 30px 0;

Nền chỉ để hiển thị trực quan các cạnh cũng như phần đệm. Bây giờ chiều cao của khối được tạo thành từ hai vết lõm này và chính dòng đó, và tất cả trông như thế này:

Xác định chiều cao dòng cho khối. Tôi nghĩ đây là cách chính xác hơn nếu bạn cần căn chỉnh một dòng văn bản. Với nó, bạn có thể viết chiều cao theo cách thông thường bằng cách sử dụng thuộc tính chiều cao. Sau đó, anh ta cũng cần đặt chiều cao của dòng, giống như chiều cao của toàn bộ khối.

div( chiều cao: 60px; chiều cao dòng: 60px; )

div( chiều cao: 60px; chiều cao dòng: 60px;

Kết quả sẽ tương tự như hình trên. Mọi thứ sẽ hoạt động ngay cả khi bạn thêm phần đệm. Tuy nhiên, chỉ cho một dòng. Nếu bạn cần thêm văn bản trong phần tử thì phương pháp này sẽ không hoạt động.

Chuyển đổi một khối thành một ô bảng. Bản chất của phương pháp này là ô trong bảng có thuộc tính Vertical-align: middle, giúp phần tử căn giữa theo chiều dọc. Theo đó, trong trường hợp này, khối cần được đặt thành như sau:

div(hiển thị: ô bảng; căn chỉnh dọc: giữa; )

div( hiển thị: bảng - ô; dọc - căn chỉnh : giữa ;

Phương pháp này tốt vì bạn có thể căn chỉnh bao nhiêu văn bản tùy thích vào giữa. Nhưng tốt hơn hết là viết display: table vào khối mà div của chúng ta được lồng vào, nếu không nó có thể không hoạt động.

Chà, ở đây chúng ta đến với kỹ thuật cuối cùng của ngày hôm nay - đây là việc căn chỉnh các khối theo chiều dọc. Phải nói rằng, một lần nữa, không có thuộc tính nào dành riêng cho việc này, nhưng có một số thủ thuật mà bạn nên biết.

Đặt thụt lề theo tỷ lệ phần trăm. Nếu bạn biết chiều cao của phần tử gốc và đặt một phần tử khối khác vào bên trong nó, bạn có thể căn giữa nó bằng cách sử dụng phần đệm phần trăm. Ví dụ: cha mẹ có chiều cao 600 pixel. Bạn đặt một khối có chiều cao 300 pixel vào đó. Bạn cần lùi lại bao nhiêu ở phần trên và phần dưới để căn giữa nó? Mỗi pixel 150 pixel, bằng 25% chiều cao của bố mẹ.

Phương pháp này chỉ cho phép căn chỉnh khi kích thước cho phép tính toán. Và nếu cha mẹ của bạn có chiều cao 887 pixel, thì bạn sẽ không thể ghi lại chính xác bất cứ điều gì, điều này đã rõ ràng.

Chèn một phần tử vào một ô trong bảng. Một lần nữa, nếu chúng ta chuyển đổi phần tử cha thành một ô trong bảng thì khối được chèn vào nó sẽ tự động được căn giữa theo chiều dọc. Để làm được điều này, cha mẹ chỉ cần đặt Vertical-align: middle.

Và nếu ngoài điều này, chúng ta còn viết lề: 0 tự động, thì phần tử sẽ được căn giữa theo chiều ngang!