Rate this post

Các bài viết liên quan:

text-align trong CSS dùng để căn chỉnh văn bản trong một thành phần HTML. Nó có thể có các giá trị sau:

  • left (mặc định) – căn chỉnh văn bản về bên trái
  • right – căn chỉnh văn bản về bên phải
  • center – căn chỉnh văn bản giữa
  • justify – căn chỉnh văn bản đều trên tất cả các dòng

Ví dụ:

p {
  text-align: left; /* aligns text to the left */
}
h1 {
  text-align: center; /* aligns text to the center */
}

Bạn có thể sử dụng text-align trên các thành phần HTML như p, h1, div hoặc bất kỳ thành phần nào có chứa văn bản. Nó chỉ áp dụng cho văn bản trong thành phần đó, không có tác động tới các thành phần con của nó.

khi nào nên sử dụng text-align trong css

Bạn sử dụng thuộc tính text-align trong CSS khi muốn căn chỉnh văn bản trong một thành phần HTML. Điều này có thể hữu ích khi bạn muốn tạo ra một giao diện văn bản được sắp xếp theo một cách cụ thể hoặc khi bạn muốn tạo ra một khoảng cách giữa văn bản và các thành phần khác trong trang web. Ví dụ, nếu bạn muốn văn bản trong một đoạn trích được căn giữa, bạn có thể sử dụng text-align: center;. Nếu bạn muốn văn bản trong một đoạn trích được căn chỉnh về bên phải, bạn có thể sử dụng text-align: right;.

text-align chủ yếu dùng cho việc căn chỉnh các đoạn văn bản trong một thành phần, và không dùng cho các thành phần như hình ảnh, biểu tượng, bảng,.. Nếu bạn muốn căn chỉnh một thành phần khác, bạn có thể sử dụng thuộc tính justify-content để căn chỉnh một container chứa thành phần đó.

Một số ví dụ text-align trong css

  • Ví dụ 1:
p {
    text-align: left; /* aligns text to the left */
}

Trong ví dụ này, văn bản trong thành phần p sẽ được căn chỉnh về bên trái.

  • Ví dụ 2:
h1 {
    text-align: center; /* aligns text to the center */
}

Trong ví dụ này, văn bản trong thành phần h1 sẽ được căn chỉnh giữa.

  • Ví dụ 3:
.article {
    text-align: justify; /* aligns text evenly along the line, with the first line aligning to the start and the last line aligning to the end */
}

Trong ví dụ này, văn bản trong thành phần có class article sẽ được căn chỉnh đều trên tất cả các dòng.

  • Ví dụ 4:
.text-right {
    text-text-align: right; /* aligns text to the right */ 
}

Copy codeTrong ví dụ này, văn bản trong thành phần có class `text-right` sẽ được căn chỉnh về bên phải.

Cần lưu ý là các ví dụ trên chỉ là một số trong nhiều cách sử dụng `text-align`, bạn có thể sử dụng `text-align` với các giá trị khác nhau tùy thuộc vào nhu cầu của bạn. Nếu bạn muốn căn chỉnh nhiều thành phần cùng một lúc, bạn có thể sử dụng một class chung cho chúng và sử dụng thuộc tính `text-align` trên class đó.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now