Thực đơn
trang chủChương trình

Tất cả về căn chỉnh CSS. Căn chỉnh văn bản trong CSS: thuộc tính text-align

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ử nhưng 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 ; bên phải : 0 ; lề : tự động ;

Căn chỉnh theo chiều ngang

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

Để căn chỉnh văn bản trong một khối, có một thuộc tính đặc biệt " căn chỉnh văn bản". Khi được đặt thành " trung tâm"Mỗi dòng văn bản sẽ được căn chỉnh theo chiều ngang. Đối với văn bản nhiều dòng, giải pháp này cực kỳ hiếm khi được sử dụng; tùy chọn này thường được tìm thấy để căn chỉnh các nhịp, liên kết hoặc hình ảnh.

Tôi đã từng phải nghĩ ra một số văn bản để chỉ ra cách căn chỉnh văn bản hoạt động bằng cách sử dụng CSS, nhưng tôi không nghĩ ra điều gì thú vị. Lúc đầu, tôi quyết định sao chép một bài đồng dao dành cho trẻ em ở đâu đó, nhưng tôi nhớ rằng điều này có thể làm hỏng tính độc đáo của bài viết và những độc giả thân yêu của chúng tôi sẽ không thể tìm thấy nó trên Google. Và sau đó tôi quyết định viết đoạn này - suy cho cùng thì vấn đề không phải ở nó mà là sự thẳng hàng.

.example-text ( text-align : center ; phần đệm : 10px ; nền : #FF90B8 ; )

Cần lưu ý rằng thuộc tính này sẽ hoạt động không chỉ cho văn bản mà còn cho bất kỳ thành phần nội tuyến nào ("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 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 ; nền : #E5DAE1 ; Height : 100px ; text-align : center ; )

Cũng có thể đạt được sự liên kết khối với một số dòng. Để làm điều này, bạn sẽ phải sử dụng một khối bao bọc bổ sung và đặt chiều cao dòng cho nó. Khối bên trong có thể có nhiều dòng nhưng phải là "nội tuyến". Bạn cần áp dụng "vertical-align: middle" cho nó.

.example-wrapper5 ( line-height : 160px ; chiều cao : 160px ; font-size : 0 ; nền : #FF9B00 ; ) .example-wrapper5 .text1 ( display : inline-block ; font-size : 14px ; line-height : 1.5 ; căn chỉnh theo chiều dọc : nền : #FFFAF2 ;

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

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

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

Tôi thường sử dụng tùy chọn này để căn chỉnh theo chiều dọc. Dưới đây là một ví dụ về bố cục được lấy từ một dự án đã hoàn thành. Hình ảnh được căn giữa theo chiều dọc theo cách này mới là điều đáng quan tâm.

.one_product .img_wrapper ( display : ô bảng ; chiều cao : 169px ; căn chỉnh dọc : giữa ; tràn : ẩn ; nền : #fff ; chiều rộng : 255px ; ) .one_product img ( chiều cao tối đa : 169px ; chiều rộng tối đa : 100 % ; chiều rộng tối thiểu : 140px ;

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

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

Và đối với các phần tử nội tuyến, bạn có thể sử dụng " căn dọc: giữa". Hơn nữa, tất cả các phần tử có " Hiển thị nội dòng" nằm trên cùng một đường thẳng sẽ thẳng hàng với một đường trung tâm chung.

Bạn cần tạo một khối phụ có chiều cao bằng chiều cao của khối cha, sau đó khối mong muốn sẽ được căn giữa. Để làm điều này, thật thuận tiện khi sử dụng các phần tử giả:trước hoặc:sau.

.example-wrapper6 ( chiều cao : 300px ; căn chỉnh văn bản : giữa ; nền : #70DAF1 ; ) .pudge ( hiển thị : khối nội tuyến ; căn chỉnh dọc : giữa ; nền : url(pudge.png) ; màu nền : # fff ; chiều rộng : 200px ; chiều cao : 200px .riki ( hiển thị : khối nội tuyến ; chiều cao : 100% ; căn chỉnh dọc : giữa ; )

Hiển thị: uốn cong và căn chỉnh

Nếu bạn không quan tâm nhiều đến người dùng Explorer 8 hoặc quan tâm đến mức sẵn sàng chèn thêm một đoạn javascript cho họ, thì bạn có thể sử dụng "display: flex". Hộp Flex rất hữu ích trong việc xử lý các vấn đề căn chỉnh và chỉ cần viết "margin: auto" để căn giữa nội dung bên trong.

Cho đến nay, tôi thực tế chưa bao giờ gặp phải phương pháp này, nhưng không có hạn chế đặc biệt nào đối với nó.

.example-wrapper7 ( display : flex ; chiều cao : 300px ; nền : #AEB96A ; ) .example-wrapper7 img ( lề : auto ; )

Chà, đó là tất cả những gì tôi muốn viết về căn chỉnh CSS. Bây giờ việc tập trung nội dung sẽ không còn là vấn đề nữa!

các cửa sổ: Internet Explorer 3.0+, Firefox 1.0+, Google Chrome, Opera 3.51 - 6.xx và 9.0+, Safari 3.1+, SeaMonkey 1.0+ [1].

Linux: Firefox 1.0+, Chrome, Opera 5.0 - 6.xx và 9.0+, SeaMonkey 1.0+ [2].

Căn giữa nội dung trang trong vùng có thể xem của cửa sổ trình duyệt bằng HTML - không có CSS. Vùng chứa nội dung của trang web sẽ được căn chỉnh ở giữa - theo chiều rộng và chiều cao: [Mở trang ví dụ].

Và cả trong Netscape 2.02 - 4.80 và Offbyone. Trong Netscape 2.02 - 4.80, có một số hiện tượng dịch chuyển nội dung trang sang góc trên bên trái của vùng có thể xem được của cửa sổ trình duyệt do cách các chương trình này dành không gian cho thanh cuộn.

Và cả trong Netscape 2.02 - 4.80. Trong Netscape 2.02 - 4.80, có một số hiện tượng dịch chuyển nội dung trang sang góc trên bên trái của vùng có thể xem được của cửa sổ trình duyệt do cách các chương trình này dành không gian cho thanh cuộn.

Subditos và chủ đề khác biệt

Căn chỉnh

căn giữa bằng CSS nếu chiều rộng của nó nhỏ hơn 100%. Căn chỉnh trung tâm theo chiều ngang. Ví dụ: HTML/XHTML. Mã số:
CSS. Mã: hr (chiều rộng: 50%; lề: 0 25% 0 25%;) /* CSS bổ sung, chỉ để cung cấp cho ví dụ một số hình thức: */ hr (height: 1px; float: left; border: 0px; color : #f00; nền: #f00;) Lưu ý: hầu hết hoạt động với cả float: left và float: none. Tuy nhiên, với float: left là lựa chọn đúng nhất. [ 1 ] Và cả trong Netscape 4.04+, Mozilla 0.6+. [ 2 ] Và cả trong Netscape 4.04+, Mozilla 0.6+.

Chuyển thư từ máy chủ IMAP này sang máy chủ IMAP khác bằng imapsync [ 1] / Linux, dòng lệnh: imapsync --host1 imap.this.com --user1 [email được bảo vệ]--passfile1 /home/user/imap/passwordfile1 --ssl1 --host2 imap.another.com --user2 [email được bảo vệ]--passfile2 /home/user/imap/passwordfile2 --ssl2 --skipsize --allowsizemismatch - Có một trang web example.com và một hộp thư [email được bảo vệ] trên máy chủ của một công ty lưu trữ nhất định. Máy chủ IMAP: imap.this.com. Máy chủ IMAP hỗ trợ SSL. - Trang web example.com đang được chuyển sang một hosting khác. Theo đó, hộp thư [email được bảo vệ] với tất cả nội dung của nó và duy trì cấu trúc thư mục. Máy chủ IMAP của nhà cung cấp dịch vụ lưu trữ khác: imap.another.com. Máy chủ IMAP hỗ trợ SSL. 1. Tạo hộp thư [email được bảo vệ] và mật khẩu của nó trên máy chủ của công ty lưu trữ nơi quá trình chuyển tiền đang diễn ra. 2. Tạo hai tệp văn bản trong thư mục /home/user/imap/: passfile1 với mật khẩu cho hộp thư trên máy chủ IMAP đầu tiên và passfile2 với mật khẩu cho hộp thư trên máy chủ IMAP thứ hai. 3. chmod 600 /home/user/imap/passwordfile1 4. chmod 600 /home/user/imap/passwordfile2 5. Cài đặt imapsync 6. Chạy imapsync với các thông số và dữ liệu thích hợp Imapsync chuyển thư trong khi vẫn duy trì cấu trúc thư mục từ imap.this .com tại imap.another.com. SSL được sử dụng để mã hóa dữ liệu khi truyền và mật khẩu được lưu trữ trong các tệp được bảo vệ bằng cách đặt quyền thành chmod 600. Việc truyền thư giữa hai dịch vụ email có thể yêu cầu sử dụng các tùy chọn imapsync [ 2 ] bổ sung. Ví dụ: khi di chuyển nội dung của một hộp thư Gmail.com sang một hộp thư khác, bạn phải chỉ định "--port1" và "--port2": imapsync --host1 imap.gmail.com --port1 993 --user1 [email được bảo vệ]--passfile1 /home/user/imap/passwordfile1 --ssl1 --host2 imap.gmail.com --port2 993 --user2 [email được bảo vệ]--passfile2 /home/user/imap/passwordfile2 --ssl2 --skipsize --allowsizemismatch [ 1 ] Một trường hợp đơn giản và phổ biến: nội dung của một hộp thư email được chuyển sang hộp thư khác - trống, nằm trên một máy chủ khác. Nhưng có thể có những tình huống phức tạp hơn: Di chuyển email từ Gmail sang Google Apps và Di chuyển sang Google Apps bằng imapsync. [ 2 ] Các tùy chọn khác: Di chuyển thư từ máy chủ này sang máy chủ khác bằng imapsync và imapsync(1) - Trang man Linux.

Trong CSS, một số điều tưởng chừng đơn giản lại không dễ thực hiện. Một trong những điều này là sự liên kết, tức là. khi một phần tử cần được định vị theo một cách nhất định so với phần tử khác.

Bài viết này trình bày một số giải pháp có sẵn sẽ giúp đơn giản hóa công việc căn giữa các phần tử theo chiều ngang và/hoặc chiều dọc.

Lưu ý: Bên dưới mỗi giải pháp là danh sách các trình duyệt cho biết phiên bản mà mã CSS được chỉ định hoạt động.

CSS - Khối căn giữa

1. Căn chỉnh một khối vào giữa khối khác. Trong trường hợp này, khối thứ nhất và thứ hai có kích thước động.

...
...

Cha mẹ ( vị trí: tương đối; ) .child ( vị trí: tuyệt đối; bên trái: 50%; trên cùng: 50%; -webkit-transform: dịch (-50%, -50%); -moz-transform: dịch (-50% , -50%); -ms-transform: dịch(-50%, -50%); -o-transform: dịch(-50%, -50% );

  • Chrome 4.0+
  • Firefox 3.6+
  • Internet Explorer 9+
  • Opera 10.5+
  • Safari 3.1+

2. Căn chỉnh một khối vào giữa khối khác. Trong trường hợp này, khối thứ hai có kích thước cố định.

Cha mẹ ( vị trí: tương đối; ) .con ( vị trí: tuyệt đối; trái: 50%; trên cùng: 50%; /* chiều rộng và chiều cao của 2 khối */ chiều rộng: 500px; chiều cao: 250px; /* Giá trị được xác định tùy thuộc về kích thước của nó */ /* lề trái = - width / 2 */ lề trái: -250px; lề-top = - chiều cao / 2 */ lề-top: -125px )

Các trình duyệt hỗ trợ giải pháp này:

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 4.0+
  • Opera 7.0+
  • Safari 1.0+

3. Căn chỉnh một khối vào giữa khối khác. Trong trường hợp này, khối thứ hai có kích thước được chỉ định theo tỷ lệ phần trăm.

Cha (vị trí: tương đối;) .con (vị trí: tuyệt đối; /* chiều rộng và chiều cao của 2 khối trong % */ chiều cao: 50%; chiều rộng: 50%; /* Giá trị được xác định tùy thuộc vào kích thước của nó trong % * / trái: 25%; /* (100% - chiều rộng) / 2 */ trên cùng: 25%; /* (100% - chiều cao) / 2 */ )

Các trình duyệt hỗ trợ giải pháp này:

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 4.0+
  • Opera 7.0+
  • Safari 1.0+

CSS - Căn chỉnh theo chiều ngang

1. Căn chỉnh một phần tử khối (hiển thị: khối) so với phần tử khác (trong đó nó nằm) theo chiều ngang:

...
...

Chặn ( lề-trái: auto; lề-phải: auto; )

Các trình duyệt hỗ trợ giải pháp này:

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 6.0+
  • Opera 3.5+
  • Safari 1.0+

2. Căn chỉnh phần tử line (display: inline) hoặc line-block (display: inline-block) theo chiều ngang:

...
...

Cha mẹ ( text-align: center; ) .child ( display: inline-block; )

Các trình duyệt hỗ trợ giải pháp này:

  • Chrome 1.0+
  • Firefox 3.0+
  • Internet Explorer 8.0+
  • Opera 7.0+
  • Safari 1.0+

CSS - Căn chỉnh theo chiều dọc

1. Căn giữa một phần tử (hiển thị: nội tuyến, hiển thị: khối nội tuyến) so với phần tử khác (trong đó nó nằm) ở giữa. Khối cha trong ví dụ này có chiều cao cố định, được đặt bằng thuộc tính CSS line-height.

...
...

Cha mẹ ( line-height: 500px; ) .child ( display: inline-block; Vertical-align: middle; )

Các trình duyệt hỗ trợ giải pháp này:

  • Chrome 1.0+
  • Firefox 3.0+
  • Internet Explorer 8.0+
  • Opera 7.0+
  • Safari 1.0+

2. Căn giữa một khối so với khối khác theo chiều dọc bằng cách biểu thị khối cha là một bảng và khối con là một ô của bảng này.

Cha mẹ ( display: table; ) .child ( display: table-cell; Vertical-align: middle; )

Các trình duyệt hỗ trợ giải pháp này:

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 8.0+
  • Opera 7.5+
  • Safari 1.0+

Nếu bạn biết bất kỳ thủ thuật thú vị nào khác hoặc các giải pháp căn chỉnh hữu ích làm sẵn, hãy chia sẻ chúng trong phần bình luận.

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.

Căn chỉnh văn bản ở giữa

Thông thường, vì mục đích trang trí, cần đặt 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, 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.

Căn chỉnh một khối vào giữa

Nếu bạn cần đặt div ở giữa, CSS có thể 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.

Căn chỉnh khối sang trái hoặc phải

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

Căn dọc

Đô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ử 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; để làm đ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 thành phần khối.

Các vấn đề có thể xảy ra với các khối được căn chỉnh

Đô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ụ: zeroing. Trong trường hợp này, font-size: 0 được ghi trong thuộc tính của phần tử gốc. 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 thành phần 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 được sử dụng thường xuyên hơn nhiều.

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.

Trong trường hợp tài liệu HTML, thẻ hoạt động nhiều hơn để đánh dấu nội dung hơn là chỉ ra cách trình bày nội dung đó. Kiểm soát tốt hơn việc trình bày đạt được với các phong cách. Trong bài viết này, tôi sẽ xem xét các kiểu liên quan đến định dạng đoạn văn trong HTML.

Nhãn

Trong HTML, bạn có thể chỉ định các đoạn văn và thuộc tính căn chỉnh sẽ căn chỉnh chúng sang trái, phải, giữa hoặc căn đều. Ngoài chúng, chúng ta sẽ sử dụng thuộc tính style toàn cục.

Căn chỉnh đoạn văn

Bạn có thể căn chỉnh một đoạn văn bằng thuộc tính căn chỉnh với các giá trị sau:

căn chỉnh văn bản: trái|phải|giữa|căn chỉnh|ban đầu|kế thừa;

Sao chép đoạn mã sau vào tệp .html của bạn.

Căn chỉnh đoạn văn bằng thuộc tính Style

Đoạn này được căn giữa

Đoạn này được căn phải

Đoạn này xuất hiện hợp lý trong cửa sổ trình duyệt. Đoạn văn căn đều được căn chỉnh sang phải và trái bằng cách thêm khoảng trắng. Bạn có thể thấy rằng các cạnh của đoạn văn được căn đều khớp với các cạnh của đoạn văn được căn trái và căn phải. Trong đoạn văn căn trái, cạnh trái là thẳng, trong khi ở đoạn văn căn phải, cạnh trái là thẳng. Bạn có thấy cả hai cạnh của đoạn văn này đều thẳng không? Điều này đạt được thông qua kiểu text-align:justify.

Trong cửa sổ trình duyệt, mã HTML cho đoạn văn trông như thế này:

Khoảng cách dòng

Bạn có thể kiểm soát khoảng cách dòng đoạn văn bằng cách sử dụng style=line-height . Sử dụng thuộc tính style với các giá trị sau:

chiều cao dòng: bình thường|số|độ dài|ban đầu|kế thừa;

Dưới đây là ví dụ về mã HTML hiển thị các đoạn văn có khoảng cách dòng khác nhau:

Đặt khoảng cách dòng bằng thuộc tính Style

Đoạn này sử dụng hai giá trị cho thuộc tính style. Chiều cao dòng đầu tiên:1.5 chỉ định khoảng cách một dòng rưỡi cho đoạn văn và giá trị thứ hai text-align:justify chỉ định rằng văn bản đoạn văn phải được phân bổ theo chiều rộng.

Đoạn này được cách dòng đôi và căn đều. line-height:2 chỉ định khoảng cách gấp đôi. Thuộc tính style không nhất thiết phải có hai giá trị. Nhưng nếu bạn cần chỉ định hai giá trị, bạn có thể làm như vậy bằng cách phân tách chúng bằng dấu chấm phẩy.


Dưới đây là một số cách khác nhau để sử dụng giá trị chiều cao dòng cho thuộc tính style:

: Đặt khoảng cách dòng thành 13 pixel;

: Đặt khoảng cách HTML giữa các đoạn văn thành 200% so với kích thước phông chữ hiện tại;

: Đặt chiều cao của dòng thành 14 pixel.

Thụt lề

Tôi đã sử dụng thuật ngữ "thụt lề" để dễ hiểu hơn. Nhưng trong HTML, chúng ta sử dụng khoảng cách để tạo khoảng trống xung quanh một đối tượng. Bạn có thể sử dụng thuộc tính style với giá trị đệm để thụt lề đoạn văn sang trái hoặc phải.

Dưới đây là ví dụ về các đoạn văn có thụt lề trái và phải:

Thụt lề đoạn văn bằng thuộc tính Style

Đoạn này không được thụt lề, nó chỉ đơn giản là hợp lý. Hãy xem thuộc tính style của phần tử P cho đoạn văn này.

Đối với đoạn này, tôi đặt phần đệm bên trái thành 30 px bằng cách sử dụng kiểu đệm-left:30px. Đoạn văn này cũng được căn chỉnh bằng cách sử dụng kiểu text-align:justify. Như bạn đã biết, chúng ta có thể sử dụng nhiều giá trị cho thuộc tính Style bằng cách phân tách chúng bằng dấu chấm phẩy.

Và đoạn văn này có thụt lề phải là 30 pixel nhưng không có thụt lề trái. Nó cũng được căn chỉnh theo chiều rộng. Giá trị 'padding-right' của thuộc tính style chỉ định phần đệm bên phải. Nếu bạn không thấy hiệu ứng, hãy giảm độ rộng của cửa sổ trình duyệt để đoạn HTML căn đều hiển thị chính xác.


Thụt lề giữa các đoạn văn (thụt lề trước và thụt lề sau đoạn văn)

Trong HTML hoặc CSS chúng ta không cần điều này. Chúng ta có thể chỉ định kiểu đệm cho phần tử

Phần đệm trên và phần đệm dưới chỉ định khoảng trắng trước và sau một đoạn văn, có tác dụng giống như phần đệm ở trên cùng hoặc dưới cùng. Nhìn vào ví dụ thẻ bên dưới

Tôi đặt đoạn HTML đầu tiên có khoảng đệm 10 px trước đoạn thứ hai và 50 px sau đoạn thứ hai:

Thụt lề đoạn văn bằng thuộc tính Style

Đoạn này không có bất kỳ thụt lề trước hoặc sau được chỉ định. Đây là một đoạn văn thông thường, hợp lý. Như bạn đã biết, chúng ta có thể căn đều một đoạn văn bằng cách sử dụng mã style=”text-align:justify” bên trong thẻ.

Đoạn này quá lớn. Nó cũng có 10 pixel đệm trước đoạn văn và 50 pixel sau nó. Bên trong thẻ tôi đã đặt 3 kiểu.

Đây là đoạn văn thông thường không có thụt lề và căn chỉnh mặc định.


Những điều cần ghi nhớ

  • Một đoạn HTML có thể được căn chỉnh bằng thuộc tính căn chỉnh hoặc kiểu căn chỉnh văn bản;
  • HTML sẽ được hiển thị khác nhau tùy thuộc vào kích thước màn hình, kích thước cửa sổ trình duyệt;
  • Việc thêm khoảng trắng hoặc dòng trống vào HTML của bạn sẽ không ảnh hưởng đến kết quả đầu ra. Trình duyệt loại bỏ tất cả các khoảng trống thừa;
  • Thẻ xác định những gì sẽ được hiển thị và kiểu xác định cách hiển thị nó;
  • Kiểu có thể được chỉ định theo ba cách khác nhau - nội tuyến (trong thẻ), nội bộ ( bên trong cùng một tệp HTML bằng cách sử dụng phần tử