Việc sắp xếp các mục trên một trang web là rất cần thiết cho thiết kế tổng thể của nó. Mặc dù có những cách khác để ảnh hưởng đến bố cục, chẳng hạn như sử dụng các bảng ( mà chúng tôi không khuyên dùng ), tốt nhất là sử dụng CSS .
Dưới đây, chúng ta sẽ xem xét cách sử dụng một thuộc tính nội tuyến kiểu CSS đơn giản để căn chỉnh hình ảnh, bảng, đoạn văn, v.v.
Lưu ý: Các phương thức tương tự này cũng có thể được sử dụng trên các trang mẫu ngoài nhưng vì các mục này áp dụng cho các mục riêng lẻ và có thể cần phải theo cách đó, tốt nhất nên sử dụng kiểu trực tuyến như được đề cập bên dưới.
Căn chỉnh đoạn văn bản
Thẻ đoạn là nơi đầu tiên để bắt đầu đặt trang web của bạn. Nó mở và đóng các thẻ trông như thế này:
Căn chỉnh văn bản trong đoạn văn mặc định ở bên trái của trang, nhưng bạn cũng có thể căn chỉnh các đoạn văn của bạn ở bên phải và giữa.
Sử dụng thuộc tính float cho phép bạn căn chỉnh các đoạn văn ở bên phải hoặc bên trái của phần tử cha. Bất kỳ phần tử nào khác bên trong phần tử cha đó sẽ chạy xung quanh phần tử được thả nổi.
Để có được hiệu ứng tốt nhất với một đoạn văn, tốt nhất bạn nên đặt chiều rộng trên đoạn văn nhỏ hơn phần tử vùng chứa (parent).
Căn chỉnh đoạn văn bản bên trong đoạn văn
Có thể cho rằng, sự liên kết thú vị nhất cho văn bản đoạn văn là "biện minh", cho trình duyệt hiển thị văn bản căn chỉnh, về cơ bản, cho cả hai bên phải và bên trái của cửa sổ.
Để biện minh cho văn bản trong một đoạn văn, bạn sẽ sử dụng thuộc tính căn chỉnh văn bản.
Bạn cũng có thể căn chỉnh tất cả văn bản bên trong một đoạn ở bên phải hoặc bên trái (mặc định), sử dụng thuộc tính căn chỉnh văn bản.
Thuộc tính text-align sẽ căn chỉnh văn bản bên trong phần tử. Về mặt kỹ thuật, nó không được coi là sắp xếp các hình ảnh được chứa bên trong đoạn văn hoặc phần tử khác, nhưng hầu hết các trình duyệt coi hình ảnh là nội tuyến cho thuộc tính này.
Căn chỉnh hình ảnh
Sử dụng thuộc tính float trên thẻ hình ảnh, bạn có thể xác định vị trí của hình ảnh trên trang và cách văn bản sẽ bao quanh chúng.
Cũng giống như các đoạn ở trên, thuộc tính kiểu float trong thẻ hình ảnh sẽ định vị hình ảnh của bạn trên trang và cho trình duyệt biết cách xử lý văn bản và các yếu tố khác xung quanh hình ảnh đó.
Văn bản sau thẻ hình ảnh ở trên sẽ chạy xung quanh hình ảnh ở bên phải khi hình ảnh hiển thị ở bên trái màn hình.
Nếu tôi muốn văn bản ngừng bao quanh hình ảnh, tôi sử dụng thuộc tính rõ ràng:
Liên kết nhiều hơn các đoạn
Tuy nhiên, điều gì xảy ra nếu bạn muốn căn chỉnh nhiều hơn chỉ là một đoạn văn hoặc một hình ảnh? Bạn có thể chỉ cần đặt thuộc tính kiểu trong mỗi đoạn văn, nhưng có một thẻ bạn có thể sử dụng có hiệu quả hơn:
Chỉ cần bao quanh văn bản và hình ảnh (bao gồm thẻ HTML ) với thẻ và thuộc tính style (float hoặc text-align) và mọi thứ trong bộ phận đó sẽ được căn chỉnh theo cách bạn muốn.
Hãy nhớ rằng các sắp xếp được thêm vào các đoạn văn hoặc hình ảnh trong bộ phận sẽ được tôn trọng, ghi đè thẻ.