Căn chỉnh trong khối css. Căn chỉnh bằng cách sử dụng biến đổi. DIV là gì

Nhiệm vụ rất thường xuyên là căn chỉnh một khối ở giữa trang / màn hình và thậm chí sao cho không có tập lệnh Java, không đặt kích thước cố định hoặc thụt lề âm và để thanh cuộn hoạt động cho phần gốc nếu khối vượt quá kích thước của nó . Có khá nhiều ví dụ đơn điệu trên Internet về cách căn chỉnh một khối vào giữa màn hình. Theo quy định, hầu hết chúng đều dựa trên các nguyên tắc giống nhau.

Dưới đây là những cách chính để giải quyết vấn đề, ưu và nhược điểm của chúng. Để hiểu bản chất của các ví dụ, tôi khuyên bạn nên giảm chiều cao/chiều rộng của cửa sổ Kết quả trong các ví dụ tại các liên kết được cung cấp.

Tùy chọn 1: Thụt lề âm.

Định vị khối sử dụng 50% thuộc tính trên cùng và bên trái, đồng thời biết trước chiều cao và chiều rộng của khối, đặt lề âm, bằng một nửa kích thước khối. Một nhược điểm rất lớn của tùy chọn này là bạn cần đếm số lần thụt lề âm. Cũng khối không hoạt động hoàn toàn chính xác khi được bao quanh bởi các thanh cuộn - nó chỉ đơn giản là bị cắt đi vì nó có lề âm.

Cha mẹ ( chiều rộng: 100%; chiều cao: 100%; vị trí: tuyệt đối; trên cùng: 0; trái: 0; tràn: tự động; ) .block ( chiều rộng: 250px; chiều cao: 250px; vị trí: tuyệt đối; trên cùng: 50%; trái : 50%; lề: -125px 0 0 -125px; img ( chiều rộng tối đa: 100%; chiều cao: tự động; hiển thị: khối; lề: 0 tự động; đường viền: không có; ) )

Tùy chọn 2. Thụt lề tự động.

Ít phổ biến hơn, nhưng tương tự như lần đầu tiên. Vì khối chúng tôi đặt chiều rộng và chiều cao, định vị các thuộc tính trên cùng bên phải dưới cùng bên trái thành 0 và đặt lề tự động. Ưu điểm của tùy chọn này là thanh cuộn hoạt động cha mẹ, nếu cái sau có chiều rộng và chiều cao 100%. Nhược điểm của phương pháp này là việc thiết lập kích thước cứng nhắc.

Cha mẹ ( chiều rộng: 100%; chiều cao: 100%; vị trí: tuyệt đối; trên cùng: 0; trái: 0; tràn: tự động; ) .block ( chiều rộng: 250px; chiều cao: 250px; vị trí: tuyệt đối; trên cùng: 0; phải: 0; dưới cùng: 0; trái: 0; lề: tự động; img ( max-width: 100%; chiều cao: tự động; hiển thị: khối; lề: 0 tự động; đường viền: không có; ) )

Tùy chọn 3. Bảng.

Thử hỏi xem sao cha mẹ kiểu bảng, ô cha mẹĐặt căn chỉnh văn bản ở giữa. MỘT khối chúng tôi thiết lập mô hình khối dòng. Nhược điểm mà chúng tôi gặp phải là thanh cuộn không hoạt động và nhìn chung tính thẩm mỹ khi “mô phỏng” bảng cũng không.

Cha mẹ ( chiều rộng: 100%; chiều cao: 100%; hiển thị: bảng; vị trí: tuyệt đối; trên cùng: 0; trái: 0; > .inner ( hiển thị: ô bảng; căn chỉnh văn bản: giữa; căn chỉnh dọc: giữa; ) ) .block ( display: inline-block; img ( display: block; border: none; ) )

Để thêm cuộn vào ví dụ này, bạn sẽ phải thêm một yếu tố nữa vào thiết kế.
Ví dụ: jsfiddle.net/serdidg/fk5nqh52/3.

Tùy chọn 4. Phần tử giả.

Tùy chọn này không có tất cả các vấn đề được liệt kê trong các phương pháp trước đó và cũng giải quyết được các vấn đề ban đầu. Vấn đề là cha mẹ thiết lập phong cách phần tử giả trước đây, cụ thể là mô hình chiều cao 100%, căn giữa và khối nội tuyến. Nó cũng tương tự với khối một mô hình khối dòng được thiết lập, căn giữa. ĐẾN khối không "rơi" vào phần tử giả, khi kích thước của cái thứ nhất lớn hơn cha mẹ, biểu thị cha mẹ khoảng trắng: nowrap và cỡ chữ: 0, sau đó khối hủy các kiểu này bằng cách sau - khoảng trắng: bình thường. Trong ví dụ này, cần có font-size: 0 để xóa khoảng trắng kết quả giữa cha mẹ Và khối do định dạng mã. Khoảng trống có thể được loại bỏ theo những cách khác, nhưng tốt nhất bạn nên tránh nó.

Cha mẹ ( chiều rộng: 100%; chiều cao: 100%; vị trí: tuyệt đối; trên cùng: 0; trái: 0; tràn: tự động; khoảng trắng: nowrap; căn chỉnh văn bản: giữa; cỡ chữ: 0; &: trước ( chiều cao: 100%; hiển thị: khối nội tuyến; căn chỉnh dọc: giữa; nội dung: ""; ) .block ( display: khối nội tuyến; khoảng trắng: bình thường; căn chỉnh dọc: giữa; căn chỉnh văn bản: trái ; img (hiển thị: khối; đường viền: không có; ) )

Hoặc, nếu bạn cần cha mẹ chỉ chiếm chiều cao và chiều rộng của cửa sổ chứ không phải toàn bộ trang:

Cha mẹ ( vị trí: cố định; trên cùng: 0; phải: 0; dưới cùng: 0; trái: 0; tràn: tự động; khoảng trắng: nowrap; căn chỉnh văn bản: giữa; cỡ chữ: 0; &: trước ( chiều cao: 100%; hiển thị: khối nội tuyến; căn chỉnh dọc: giữa; nội dung: ""; ) .block ( display: khối nội tuyến; khoảng trắng: bình thường; căn chỉnh dọc: giữa; căn chỉnh văn bản: trái; img ( hiển thị: khối; đường viền: không có; ) )

Tùy chọn 5. Flexbox.

Một trong những cách đơn giản và tinh tế nhất là sử dụng flexbox. Nó không yêu cầu những chuyển động cơ thể không cần thiết, mô tả khá rõ ràng bản chất của những gì đang xảy ra và có tính linh hoạt cao. Điều duy nhất đáng ghi nhớ khi chọn phương pháp này là hỗ trợ cho IE từ phiên bản 10 trở đi. caniuse.com/#feat=flexbox

Cha mẹ ( chiều rộng: 100%; chiều cao: 100%; vị trí: cố định; trên cùng: 0; trái: 0; hiển thị: flex; căn chỉnh các mục: giữa; căn chỉnh nội dung: giữa; biện minh-nội dung: giữa; tràn: tự động; ) .block ( nền: #60a839; img ( display: block; border: none; ) )

Tùy chọn 6. Chuyển đổi.

Phù hợp nếu chúng ta bị giới hạn bởi cấu trúc và không có cách nào để thao tác với phần tử gốc nhưng khối cần được căn chỉnh bằng cách nào đó. Hàm css dịch() sẽ có tác dụng giải cứu. Giá trị định vị tuyệt đối 50% sẽ định vị chính xác góc trên cùng bên trái của khối ở giữa, sau đó giá trị dịch âm sẽ di chuyển khối so với kích thước của chính nó. Xin lưu ý rằng các hiệu ứng tiêu cực có thể xuất hiện dưới dạng các cạnh mờ hoặc kiểu phông chữ. Ngoài ra, phương pháp này có thể dẫn đến các vấn đề khi tính toán vị trí của khối bằng java-script.Đôi khi, để bù đắp cho việc mất 50% chiều rộng do sử dụng thuộc tính CSS left, quy tắc được chỉ định cho khối có thể trợ giúp: lề phải: -50%; .

Cha mẹ ( chiều rộng: 100%; chiều cao: 100%; vị trí: cố định; trên cùng: 0; trái: 0; tràn: tự động; ) .block ( vị trí: tuyệt đối; trên cùng: 50%; trái: 50%; biến đổi: dịch( -50%, -50%); img ( hiển thị: khối; ) )

Tùy chọn 7. Nút.

Tùy chọn người dùng ở đâu khốiđóng khung trong một thẻ nút. Nút này có đặc tính căn giữa mọi thứ bên trong nó, cụ thể là các phần tử của mô hình nội tuyến và mô hình khối (khối nội tuyến). Trong thực tế tôi không khuyên bạn nên sử dụng nó.

Cha mẹ ( chiều rộng: 100%; chiều cao: 100%; vị trí: tuyệt đối; trên cùng: 0; trái: 0; tràn: tự động; nền: không; viền: không có; phác thảo: không có;) .block ( hiển thị: khối nội tuyến; img (hiển thị: khối;; đường viền: không có; ) )

Thưởng

Sử dụng ý tưởng của tùy chọn thứ 4, bạn có thể đặt lề ngoài cho khối và cái sau sẽ được hiển thị đầy đủ được bao quanh bởi các thanh cuộn.
Ví dụ: jsfiddle.net/serdidg/nfqg9rza/2.

Bạn cũng có thể căn chỉnh hình ảnh vào giữa và nếu hình ảnh lớn hơn cha mẹ, chia tỷ lệ theo kích thước cha mẹ.
Ví dụ: jsfiddle.net/serdidg/nfqg9rza/3.
Ví dụ với một bức tranh lớn:

Căn giữa các phần tử theo chiều dọc bằng CSS là một nhiệm vụ gây khó khăn cho các nhà phát triển. Tuy nhiên, có một số phương pháp để giải quyết nó khá đơn giản. Bài học này trình bày 6 phương án căn giữa nội dung theo chiều dọc.

Hãy bắt đầu với một mô tả chung về vấn đề.

Vấn đề định tâm dọc

Định tâm theo chiều ngang rất đơn giản và dễ dàng. Khi phần tử ở giữa là nội tuyến, chúng ta sử dụng thuộc tính căn chỉnh tương ứng với phần tử gốc. Khi phần tử ở cấp khối, chúng tôi đặt chiều rộng của nó và cài đặt tự động lề trái và phải.

Hầu hết mọi người, khi sử dụng thuộc tính text-align:, đều tham khảo thuộc tính Vertical-align để căn giữa theo chiều dọc. Mọi thứ trông khá logic. Nếu bạn đã sử dụng các mẫu bảng, có thể bạn đã sử dụng rộng rãi thuộc tính valign, điều này củng cố niềm tin rằng căn chỉnh dọc là cách đúng đắn để giải quyết vấn đề.

Nhưng thuộc tính valign chỉ hoạt động trên các ô của bảng. Và thuộc tính căn chỉnh dọc rất giống với nó. Nó cũng ảnh hưởng đến các ô của bảng và một số thành phần nội tuyến.

Giá trị của thuộc tính căn chỉnh dọc có liên quan đến phần tử nội tuyến gốc.

Trong một dòng văn bản, căn chỉnh tương ứng với chiều cao của dòng.
Ô trong bảng sử dụng căn chỉnh tương ứng với một giá trị được tính toán bằng thuật toán đặc biệt (thường là chiều cao của hàng).

Nhưng thật không may, thuộc tính căn chỉnh dọc không hoạt động trên các phần tử cấp khối (ví dụ: các đoạn văn bên trong phần tử div). Tình huống này có thể khiến người ta nghĩ rằng không có giải pháp nào cho vấn đề căn chỉnh theo chiều dọc.

Nhưng có các phương pháp khác để căn giữa các phần tử khối, việc lựa chọn phương pháp này phụ thuộc vào những gì đang được căn giữa so với vùng chứa bên ngoài.

Phương pháp chiều cao dòng

Phương pháp này hoạt động khi bạn muốn căn giữa một dòng văn bản theo chiều dọc. Tất cả những gì bạn phải làm là đặt chiều cao của dòng lớn hơn cỡ chữ.

Theo mặc định, khoảng trắng sẽ được phân bổ đều ở đầu và cuối văn bản. Và dòng sẽ được căn giữa theo chiều dọc. Thông thường chiều cao của dòng được làm bằng chiều cao của phần tử.

HTML:

Văn bản bắt buộc

CSS:

#child ( chiều cao dòng: 200px; )

Phương pháp này hoạt động trên tất cả các trình duyệt, mặc dù nó chỉ có thể được sử dụng cho một dòng. Giá trị 200 px trong ví dụ được chọn tùy ý. Bạn có thể sử dụng bất kỳ giá trị nào lớn hơn kích thước phông chữ văn bản.

Căn giữa hình ảnh bằng chiều cao dòng

Nếu nội dung là hình ảnh thì sao? Phương pháp trên có hiệu quả không? Câu trả lời nằm ở một dòng mã CSS nữa.

HTML:

CSS:

#parent ( chiều cao dòng: 200px; ) #parent img ( căn chỉnh dọc: giữa; )

Giá trị của thuộc tính line-height phải lớn hơn chiều cao của hình ảnh.

Phương pháp bảng CSS

Ở trên đã đề cập rằng thuộc tính căn chỉnh dọc được sử dụng cho các ô của bảng, nơi nó hoạt động rất tốt. Chúng ta có thể hiển thị phần tử của mình dưới dạng ô bảng và sử dụng thuộc tính căn chỉnh dọc trên đó để căn giữa nội dung theo chiều dọc.

Ghi chú: Bảng CSS không giống với bảng HTML.

HTML:

Nội dung

CSS:

#parent (hiển thị: bảng;) #child ( hiển thị: ô bảng; căn dọc: giữa; )

Chúng tôi đặt đầu ra của bảng thành phần tử div cha và xuất phần tử div lồng nhau dưới dạng ô bảng. Bây giờ bạn có thể sử dụng thuộc tính căn chỉnh dọc trên vùng chứa bên trong. Mọi thứ trong đó sẽ được căn giữa theo chiều dọc.

Không giống như phương pháp trên, trong trường hợp này nội dung có thể động vì phần tử div sẽ thay đổi kích thước theo nội dung của nó.

Nhược điểm của phương pháp này là nó không hoạt động trong các phiên bản IE cũ hơn. Bạn phải sử dụng thuộc tính display: inline-block cho vùng chứa lồng nhau.

Định vị tuyệt đối và lề âm

Phương pháp này cũng hoạt động trong tất cả các trình duyệt. Nhưng nó yêu cầu phần tử được căn giữa phải có chiều cao.

Mã ví dụ thực hiện định tâm theo chiều ngang và chiều dọc cùng một lúc:

HTML:

Nội dung

CSS:

#parent (vị trí: tương đối;) #child ( vị trí: tuyệt đối; trên cùng: 50%; bên trái: 50%; chiều cao: 30%; chiều rộng: 50%; lề: -15% 0 0 -25%; )

Đầu tiên, chúng ta đặt loại định vị phần tử. Tiếp theo, chúng tôi đặt thuộc tính top và left của phần tử div lồng nhau thành 50%, tương ứng với tâm của phần tử cha. Nhưng chính giữa là góc trên cùng bên trái của phần tử lồng nhau. Do đó, bạn cần nâng nó lên (một nửa chiều cao) và di chuyển nó sang trái (một nửa chiều rộng), khi đó tâm sẽ trùng với tâm của phần tử gốc. Vì vậy việc biết chiều cao của phần tử trong trường hợp này là cần thiết. Sau đó, chúng ta đặt phần tử có lề trên và trái âm tương ứng bằng một nửa chiều cao và chiều rộng.

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

Định vị và kéo dài tuyệt đối

Mã ví dụ thực hiện định tâm theo chiều dọc và chiều ngang.

HTML:

Nội dung

CSS:

#parent (vị trí: tương đối;) #child ( vị trí: tuyệt đối; trên cùng: 0; dưới cùng: 0; trái: 0; phải: 0; chiều rộng: 50%; chiều cao: 30%; lề: tự động; )

Ý tưởng đằng sau phương pháp này là kéo dài phần tử lồng nhau đến cả 4 đường viền của phần tử cha bằng cách đặt các thuộc tính trên, dưới, phải và trái về 0.

Việc đặt lề để tự động tạo trên tất cả các cạnh sẽ đặt các giá trị bằng nhau ở cả 4 cạnh và căn giữa phần tử div lồng nhau của chúng ta trên phần tử gốc của nó.

Thật không may, phương pháp này không hoạt động trong IE7 trở xuống.

Không gian bên trên và bên dưới bằng nhau

Trong phương pháp này, phần đệm bằng nhau được đặt rõ ràng ở trên và dưới phần tử cha.

HTML:

Nội dung

CSS:

#parent ( đệm: 5% 0; ) #child ( đệm: 10% 0; )

Mã CSS mẫu đặt phần đệm trên và dưới cho cả hai phần tử. Đối với phần tử lồng nhau, việc đặt phần đệm sẽ giúp căn giữa phần tử đó theo chiều dọc. Và phần đệm của phần tử cha sẽ căn giữa phần tử lồng nhau bên trong nó.

Đơn vị đo lường tương đối được sử dụng để thay đổi kích thước các phần tử một cách linh hoạt. Và đối với các đơn vị đo lường tuyệt đối, bạn sẽ phải thực hiện các phép tính.

Ví dụ: nếu phần tử cha có chiều cao 400px và phần tử lồng nhau là 100px thì cần có khoảng đệm 150px ở trên cùng và dưới cùng.

150 + 150 + 100 = 400

Việc sử dụng % cho phép bạn để lại các phép tính cho trình duyệt.

Phương pháp này hoạt động ở mọi nơi. Nhược điểm là cần tính toán.

Ghi chú: Phương pháp này hoạt động bằng cách đặt phần đệm bên ngoài của một phần tử. Bạn cũng có thể sử dụng lề trong một phần tử. Việc quyết định sử dụng lề hay phần đệm phải được đưa ra tùy thuộc vào đặc thù của dự án.

div nổi

Phương thức này sử dụng phần tử div trống nổi và giúp kiểm soát vị trí của phần tử lồng nhau trong tài liệu. Lưu ý rằng div nổi được đặt trước phần tử lồng nhau của chúng ta trong mã HTML.

HTML:

Nội dung

CSS:

#parent (chiều cao: 250px;) #floater ( float: trái; chiều cao: 50%; chiều rộng: 100%; lề dưới: -50px; ) #child ( clear: cả hai; chiều cao: 100px; )

Chúng tôi dịch chuyển div trống sang trái hoặc phải và đặt chiều cao của nó thành 50% phần tử gốc của nó. Bằng cách này, nó sẽ lấp đầy nửa trên của phần tử gốc.

Vì div này nổi nên nó bị xóa khỏi luồng tài liệu thông thường và chúng ta cần mở văn bản trên phần tử lồng nhau. Ví dụ này sử dụng clear: cả hai , nhưng nó khá đủ để sử dụng cùng hướng với phần bù của phần tử div trống nổi.

Đường viền trên cùng của phần tử div lồng nhau nằm ngay bên dưới đường viền dưới cùng của phần tử div trống. Chúng ta cần di chuyển phần tử lồng nhau lên một nửa chiều cao của phần tử trống nổi. Để giải quyết vấn đề, hãy sử dụng giá trị thuộc tính lề dưới âm cho phần tử div trống nổi.

Phương pháp này cũng hoạt động trong tất cả các trình duyệt. Tuy nhiên, việc sử dụng nó đòi hỏi phải có thêm một phần tử div trống và kiến thức về chiều cao của phần tử lồng nhau.

Phần kết luận

Tất cả các phương pháp được mô tả đều dễ sử dụng. Khó khăn là không có cái nào phù hợp cho mọi trường hợp. Bạn cần phân tích dự án và chọn dự án phù hợp nhất với yêu cầu.

Việc căn chỉnh các phần tử theo chiều ngang và chiều dọc có thể được thực hiện theo nhiều cách khác nhau. Việc lựa chọn phương pháp phụ thuộc vào loại phần tử (khối hoặc nội tuyến), loại vị trí, kích thước, v.v.

1. Căn chỉnh theo chiều ngang vào giữa khối/trang

1.1. Nếu chiều rộng khối được chỉ định:

div ( width: 300px; lề: 0 auto; /*căn giữa phần tử theo chiều ngang trong khối cha*/ )

Nếu bạn muốn căn chỉnh một phần tử nội tuyến theo cách này, nó cần được đặt thành display: block;

1.2. Nếu một khối được lồng trong một khối khác và chiều rộng của nó không được chỉ định/chỉ định:

.wrapper(text-align: center;)

1.3. Nếu khối có chiều rộng và cần được căn giữa vào khối cha của nó:

.wrapper (vị trí: tương đối; /*đặt vị trí tương đối cho khối cha để sau đó chúng ta có thể định vị tuyệt đối khối bên trong nó*/) .box ( width: 400px; vị trí: tuyệt đối; trái: 50%; lề trái: -200px; / *dịch chuyển khối sang trái một khoảng bằng một nửa chiều rộng của nó*/ )

1.4. Nếu các khối không được chỉ định chiều rộng, bạn có thể căn giữa chúng bằng cách sử dụng khối bao bọc chính:

.wrapper (text-align: center; /*đặt nội dung của khối vào giữa*/) .box ( display: inline-block; /*sắp xếp các khối thành một hàng theo chiều ngang*/ lề phải: -0,25em ; /*xóa khoảng trắng giữa các khối*/ )

2. Căn chỉnh theo chiều dọc

2.1. Ví dụ: nếu văn bản chiếm một dòng đối với các nút và mục menu:

.button ( chiều cao: 50px; chiều cao dòng: 50px; )

2.2. Để căn chỉnh theo chiều dọc một khối trong khối cha:

.wrapper (vị trí: tương đối;).box ( chiều cao: 100px; vị trí: tuyệt đối; trên cùng: 50%; lề: -50px 0 0 0; )

2.3. Căn chỉnh theo chiều dọc theo loại bảng:

.wrapper ( hiển thị: bảng; chiều rộng: 100%; ) .box ( hiển thị: ô bảng; chiều cao: 100px; căn chỉnh văn bản: giữa; căn chỉnh dọc: giữa; )

2.4. Nếu một khối có chiều rộng và chiều cao nhất định và cần được căn giữa vào khối cha của nó:

.wrapper ( vị trí: tương đối; ) .box ( chiều cao: 100px; chiều rộng: 100px; vị trí: tuyệt đối; trên cùng: 0; phải: 0; dưới cùng: 0; trái: 0; lề: tự động; tràn: tự động; /*to nội dung không được lan truyền */ )

2.5. Định vị tuyệt đối ở giữa trang/khối bằng cách sử dụng phép chuyển đổi CSS3:

nếu kích thước được chỉ định cho phần tử

div ( width: 300px; /*đặt chiều rộng của khối*/ Height:100px; /*đặt chiều cao của khối*/ Transform: Translate(-50%, -50%); location: tuyệt đối; top: 50 %; trái: 50%; )

nếu phần tử không có thứ nguyên và không trống

Một số văn bản ở đây

h1 ( lề: 0; biến đổi: dịch(-50%, -50%); vị trí: tuyệt đối; trên cùng: 50%; trái: 50%; )

Tùy chọn 1: Thụt lề âm.

Tùy chọn 2. Thụt lề tự động.

Tùy chọn 3. Bảng.

Để thêm cuộn vào ví dụ này, bạn sẽ phải thêm một yếu tố nữa vào thiết kế.
Ví dụ: jsfiddle.net/serdidg/fk5nqh52/3.

Tùy chọn 4. Phần tử giả.

Hoặc, nếu bạn cần cha mẹ chỉ chiếm chiều cao và chiều rộng của cửa sổ chứ không phải toàn bộ trang:

Tùy chọn 5. Flexbox.

Tùy chọn 6. Chuyển đổi.

Tùy chọn 7. Nút.

Tùy chọn azproduction của người dùng ở đâu khốiđóng khung trong một thẻ nút. Nút này có đặc tính căn giữa mọi thứ bên trong nó, cụ thể là các phần tử của mô hình nội tuyến và mô hình khối (khối nội tuyến). Trong thực tế tôi không khuyên bạn nên sử dụng nó.

Thưởng

Chúc một ngày tốt lành, người đăng ký và độc giả của ấn phẩm này. Hôm nay tôi muốn đi vào chi tiết và cho bạn biết cách căn giữa văn bản trong CSS. Ở một số bài trước mình đã gián tiếp đề cập đến chủ đề này nên các bạn đã có chút kiến thức về lĩnh vực này.

Tuy nhiên, trong ấn phẩm này, tôi sẽ cho bạn biết về tất cả các cách khác nhau để căn chỉnh đối tượng, đồng thời giải thích cách thụt lề và gạch đỏ các đoạn văn. Vì vậy, hãy bắt đầu học tài liệu!

HTML và con cháu của nó và căn chỉnh

Phương pháp này hầu như không bao giờ được sử dụng vì nó đã được thay thế bằng các công cụ biểu định kiểu xếp tầng. Tuy nhiên, biết rằng một thẻ như vậy tồn tại sẽ không làm tổn thương bạn.

Về việc xác thực (thuật ngữ này được mô tả chi tiết trong bài viết ""), bản thân đặc tả html lên án việc sử dụng < trung tâm>, vì để có hiệu lực cần sử dụng phép chuyển tiếp DOCTYPE>.

Loại nàycho phép các yếu tố bị cấm đi qua.

TRUNG TÂM

Bây giờ hãy chuyển sang thuộc tính căn chỉnh. Nó đặt căn chỉnh theo chiều ngang của các đối tượng và khớp với phần khai báo thẻ. Thông thường, nó có thể được sử dụng để căn chỉnh nội dung sang trái ( bên trái), dọc theo cạnh phải ( Phải), căn giữa ( trung tâm) và theo chiều rộng văn bản ( biện minh).

Dưới đây tôi sẽ đưa ra một ví dụ trong đó tôi sẽ đặt hình ảnh và đoạn văn ở giữa.

căn chỉnh
Nội dung này sẽ được căn giữa.

Xin lưu ý rằng đối với hình ảnh, thuộc tính chúng tôi đang phân tích có ý nghĩa hơi khác nhau.
Trong ví dụ tôi đã sử dụng căn chỉnh="ở giữa". Nhờ đó, hình ảnh đã được căn chỉnh sao cho câu nói nằm rõ ràng ở giữa bức tranh.
Công cụ căn giữa trong css

Thuộc tính CSS được thiết kế để căn chỉnh các khối, nội dung văn bản và đồ họa được sử dụng thường xuyên hơn. Điều này chủ yếu là do sự thuận tiện và linh hoạt trong cách thực hiện.

Vì vậy, hãy bắt đầu với thuộc tính đầu tiên của việc căn giữa văn bản - đây là chữ-căn chỉnh.

Nó hoạt động theo cách tương tự như căn chỉnh trong . Trong số các từ khóa, bạn có thể chọn một từ khóa từ danh sách chung hoặc kế thừa các đặc điểm của tổ tiên ( thừa kế).

Tôi muốn lưu ý rằng trong css3 bạn có thể đặt thêm 2 tham số: bắt đầu– tùy theo quy tắc viết văn bản (từ phải sang trái hoặc ngược lại) mà đặt căn lề trái hoặc phải (tương tự như tác phẩm trái hoặc phải) và kết thúc– ngược lại với bắt đầu (khi viết văn bản từ trái sang phải thì nó hoạt động như bên phải, khi viết từ phải sang trái – trái).

căn chỉnh văn bản
Câu bên phải

Câu sử dụng kết thúc

Tôi sẽ kể cho bạn nghe về một mẹo nhỏ. Khi chọn một giá trị biện minh dòng cuối cùng có thể lủng lẳng không hấp dẫn từ phía dưới. Ví dụ: để đặt nó ở giữa, bạn có thể sử dụng thuộc tính căn chỉnh văn bản cuối cùng.

Để căn chỉnh nội dung trang hoặc ô bảng theo chiều dọc, hãy sử dụng thuộc tính căn chỉnh theo chiều dọc. Dưới đây tôi đã mô tả các từ khóa chính của phần tử.

Từ khóa Mục đích
đường cơ sở Chỉ định căn chỉnh cho một dòng tổ tiên, được gọi là dòng cơ sở. Nếu đối tượng tổ tiên không có đường như vậy thì việc căn chỉnh sẽ xảy ra dọc theo đường viền dưới.
ở giữa Phần giữa của đối tượng bị đột biến được căn chỉnh theo đường cơ sở, theo đó chiều cao sàn của phần tử gốc được thêm vào.
đáy Phần dưới cùng của nội dung được chọn sẽ điều chỉnh về phía dưới của đối tượng bên dưới nó.
đứng đầu Tương tự như phần dưới cùng nhưng với phần trên cùng của đối tượng.
siêu Tạo ký tự siêu ký tự.
phụ Tạo chỉ số dưới của phần tử.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 căn chỉnh theo chiều dọc
C TRONG E TVỀĐẾN

căn chỉnh theo chiều dọc
C TRONG E TVỀĐẾN

Thụt lề

Và cuối cùng chúng ta đến phần thụt lề đoạn văn. Ngôn ngữ CSS sử dụng một thuộc tính đặc biệt gọi là thụt lề văn bản.

Với sự trợ giúp của nó, bạn có thể tạo cả đường màu đỏ và phần nhô ra (bạn cần chỉ định giá trị âm).

thụt lề văn bản

Để tạo đường màu đỏ bạn chỉ cần biết một tham số.

Đây là thuộc tính thụt lề văn bản đơn giản.

Từ khóa	Mục đích
đường cơ sở	Chỉ định căn chỉnh cho một dòng tổ tiên, được gọi là dòng cơ sở. Nếu đối tượng tổ tiên không có đường như vậy thì việc căn chỉnh sẽ xảy ra dọc theo đường viền dưới.
ở giữa	Phần giữa của đối tượng bị đột biến được căn chỉnh theo đường cơ sở, theo đó chiều cao sàn của phần tử gốc được thêm vào.
đáy	Phần dưới cùng của nội dung được chọn sẽ điều chỉnh về phía dưới của đối tượng bên dưới nó.
đứng đầu	Tương tự như phần dưới cùng nhưng với phần trên cùng của đối tượng.
siêu	Tạo ký tự siêu ký tự.
phụ	Tạo chỉ số dưới của phần tử.