Cách Căn Giữa Hình ảnh Và đối Tượng HTML Trên Trang Web Bằng CSS

Những gì để biết

• Để căn giữa văn bản, hãy sử dụng mã sau ("[/]" biểu thị dấu ngắt dòng): .center {[/] text-align: center; [/]} .
• Các khối nội dung ở giữa với mã sau ("[/]" biểu thị dấu ngắt dòng): .center {[/] margin: auto; [/] chiều rộng: 80em; [/]} .
• Để căn giữa hình ảnh ("[/]" biểu thị dấu ngắt dòng): img.center {[/] display: block; [/] margin-left: tự động; [/] margin-right: tự động; [/]} .

CSS là cách tốt nhất để căn giữa các phần tử, nhưng nó có thể là một thách thức đối với những nhà thiết kế web mới bắt đầu vì có rất nhiều cách để hoàn thành nó. Bài viết này giải thích cách sử dụng CSS để căn giữa văn bản, khối văn bản và hình ảnh.

Căn giữa văn bản với CSS

Bạn chỉ cần biết một thuộc tính kiểu để căn giữa văn bản trên một trang:

.center { text-align: center; }

Với dòng CSS này, mọi đoạn văn được viết bằng lớp .center sẽ được căn giữa theo chiều ngang bên trong phần tử mẹ của nó. Ví dụ: một đoạn bên trong một bộ phận (con của bộ phận đó) sẽ được căn giữa theo chiều ngang bên trong

Đây là một ví dụ về lớp này được áp dụng trong tài liệu HTML:

Văn bản này được căn giữa.

Khi căn giữa văn bản với thuộc tính text-align, hãy nhớ rằng nó sẽ được căn giữa trong phần tử chứa nó và không nhất thiết phải căn giữa trong chính trang đầy đủ.

Khả năng đọc luôn là chìa khóa khi nói đến văn bản trang web. Các khối văn bản lớn căn giữa có thể khó đọc, vì vậy hãy sử dụng kiểu này một cách tiết kiệm. Dòng tiêu đề và các khối văn bản nhỏ, chẳng hạn như văn bản giới thiệu cho một bài báo, thường dễ đọc khi được căn giữa; tuy nhiên, các khối văn bản lớn hơn, chẳng hạn như một bài báo đầy đủ, sẽ khó tiêu thụ nếu được căn chính giữa hoàn toàn.

Căn giữa các khối nội dung với CSS

Các khối nội dung được tạo bằng cách sử dụng HTML

.center { margin: auto; chiều rộng: 80em; }

Cách viết tắt CSS này cho thuộc tính margin sẽ đặt các lề trên và dưới thành giá trị 0, trong khi bên trái và bên phải sẽ sử dụng "auto". Điều này về cơ bản lấy bất kỳ không gian nào có sẵn và chia đều nó giữa hai bên của cửa sổ khung nhìn, căn giữa phần tử trên trang một cách hiệu quả.

Ở đây nó được áp dụng trong HTML:

Toàn bộ khối này được căn giữa, nhưng văn bản bên trong nó được căn trái.

Miễn là khối của bạn có chiều rộng xác định, nó sẽ tự căn giữa bên trong phần tử chứa. Văn bản trong khối đó sẽ không được căn giữa mà sẽ được căn trái. Điều này là do văn bản được căn trái làm mặc định trong trình duyệt web. Nếu bạn cũng muốn văn bản được căn giữa, bạn có thể sử dụng thuộc tính text-align được đề cập trước đó cùng với phương pháp này để căn giữa sự phân chia.

Căn giữa hình ảnh với CSS

Mặc dù hầu hết các trình duyệt sẽ hiển thị hình ảnh được căn giữa bằng cách sử dụng cùng một thuộc tính text-align, nhưng nó không được W3C khuyến nghị. Do đó, luôn có khả năng các phiên bản trình duyệt trong tương lai có thể bỏ qua phương pháp này.

Thay vì sử dụng căn chỉnh văn bản để căn giữa một hình ảnh, bạn nên nói rõ ràng với trình duyệt rằng hình ảnh là một phần tử cấp khối. Bằng cách này, bạn có thể căn giữa nó như cách bạn làm với bất kỳ khối nào khác. Đây là CSS để thực hiện điều này:

img.center { display: block; margin-left: tự động; margin-right: tự động; }

Và đây là HTML để hình ảnh được căn giữa:

Bạn cũng có thể căn giữa các đối tượng bằng cách sử dụng CSS nội tuyến (xem bên dưới), nhưng cách tiếp cận này không được khuyến khích vì nó thêm các kiểu trực quan vào đánh dấu HTML của bạn. Hãy nhớ rằng, phong cách và cấu trúc nên tách biệt; thêm các kiểu CSS vào HTML sẽ phá vỡ sự phân tách đó và do đó, bạn nên tránh nó bất cứ khi nào có thể.

Căn giữa các phần tử theo chiều dọc với CSS

Căn giữa các đối tượng theo chiều dọc luôn là một thách thức trong thiết kế web, nhưng việc phát hành mô-đun bố cục hộp linh hoạt CSS trong CSS3 cung cấp một cách để làm điều đó.

Căn chỉnh theo chiều dọc hoạt động tương tự như căn chỉnh theo chiều ngang được đề cập ở trên. Thuộc tính CSS là căn chỉnh theo chiều dọc, như sau:

.vcenter { vertical-align: middle; }

Tất cả các trình duyệt hiện đại đều hỗ trợ kiểu CSS này . Nếu bạn gặp sự cố với các trình duyệt cũ hơn, W3C khuyên bạn nên căn giữa văn bản theo chiều dọc trong một vùng chứa. Để làm như vậy, hãy đặt các phần tử bên trong một phần tử chứa, chẳng hạn như một div và đặt chiều cao tối thiểu trên đó. Khai báo phần tử chứa dưới dạng một ô trong bảng và đặt căn chỉnh theo chiều dọc thành "giữa".

Ví dụ, đây là CSS:

.vcenter { min-height: 12em; display: table-cell; vertical-align: giữa; }

Và đây là HTML:

Văn bản này được căn giữa theo chiều dọc trong hộp.

Không sử dụng phần tử HTML để căn giữa hình ảnh và văn bản; nó đã không còn được dùng nữa và các trình duyệt web hiện đại không còn hỗ trợ nó nữa. Phần lớn, điều này là phản ứng đối với sự tách biệt rõ ràng giữa cấu trúc và kiểu của HTML5: HTML tạo ra cấu trúc và CSS quy định kiểu. Vì căn giữa là một đặc điểm trực quan của một phần tử (nó trông như thế nào chứ không phải là cái gì), nên kiểu đó được xử lý bằng CSS, không phải HTML. Thay vào đó, hãy sử dụng CSS để các trang của bạn hiển thị đúng cách và tuân theo các tiêu chuẩn hiện đại.

Căn giữa theo chiều dọc và các phiên bản cũ hơn của Internet Explorer

Bạn có thể buộc Internet Explorer (IE) căn giữa và sau đó sử dụng các chú thích có điều kiện để chỉ IE nhìn thấy các kiểu, nhưng chúng hơi dài dòng và không hấp dẫn. Tuy nhiên, quyết định năm 2015 của Microsoft ngừng hỗ trợ cho các phiên bản IE cũ hơn sẽ khiến điều này không thành vấn đề khi IE hết thời gian sử dụng.