Yếu tố Pesky lil '<small> không hoạt động với căn chỉnh văn bản, cần phải bị chặn

Question

Vì vậy, bạn đã cố gắng căn giữa phần tử HTML <small> với thuộc tính CSS text-align: center (hoặc right) và nó không hoạt động?

Vâng, đó có thể là do HTML/CSS trông giống like this. Có một giải pháp dễ dàng CSS ...

Nếu bạn đặt một tài sản small { display: block }like this sau đó nó hoạt động như một nét duyên dáng:

Horay!

Nhưng bạn có thể nói điều gì đó không đúng ... và tại sao nó hoạt động?

Answer 1

Vâng, <small> về cơ bản là một yếu tố nội tuyến và text-align bất động sản là phải applied to block elements và truyền lại cho các yếu tố nội tuyến trẻ (hoặc strings inside).

Bằng cách thực hiện small thành phần tử khối, chúng tôi cho phép văn bản bên trong nó được tạo kiểu.

---

Ngoài ra, W3 spec xác định <small> yếu tố được sử dụng bên trong một bối cảnh phân nhịp - tương tự như các yếu tố như <strong>, <b>, <span>, <a>, and so on - mà sẽ làm same thing trong trường hợp này.

W3 wiki examples đề nghị để đưa <small> bên <p> thẻ và phong cách mà - Tôi đoán đó là giải pháp ngữ nghĩa hơn, và đây là the code nếu bạn cần phải nhìn thấy nó.

---

Tại sao điều này hơi khó hiểu?

Vâng, một số tài nguyên của bên thứ ba trên web không đề cập đến nó hoặc ít nhất là không rõ ràng. Ví dụ: HTML5 Doctor's example sử dụng phần tử small không có vùng chứa phần tử khối xung quanh nó.

Hy vọng làm rõ mọi thứ! Như mọi khi, xin vui lòng cho tôi biết nếu tôi bỏ lỡ bất cứ điều gì. (Và tôi nghĩ rằng tôi đã làm.)