Cách căn giữa các liên kết trong CSS

Có hai phương pháp để căn giữa liên kết:

• Căn giữa các liên kết trong CSS bằng cách sử dụng “ căn chỉnh văn bản ' tài sản
• Căn giữa các liên kết trong CSS bằng cách sử dụng “ lề ' tài sản

Trong bài viết này, chúng tôi sẽ giải thích cả hai phương pháp để căn giữa liên kết. Vì vậy, hãy bắt đầu!

Phương pháp 1: Liên kết trung tâm trong CSS Sử dụng thuộc tính text-align

Để căn giữa các liên kết trong HTML, chúng tôi sẽ sử dụng “ căn chỉnh văn bản ”Thuộc tính của CSS. Các ' căn chỉnh văn bản ”Thuộc tính trong CSS được sử dụng để điều chỉnh căn chỉnh của văn bản, chẳng hạn như căn trái, phải, giữa và căn đều.

Cú pháp

Cú pháp của thuộc tính text-align là:

Thay cho “ giá trị ”, Bạn có thể đặt căn chỉnh của văn bản như trái, phải, chính giữa và căn đều.

Bây giờ, chúng tôi sẽ sử dụng “ căn chỉnh văn bản ”Để căn giữa các liên kết đã cho.

Thí dụ

Để căn giữa một liên kết trên một trang web, chúng tôi sẽ thêm một liên kết trong HTML vào bên trong thẻ . Để làm như vậy, hãy sử dụng thẻ để xác định siêu liên kết và cung cấp địa chỉ của trang web được yêu cầu. Sau đó, chỉ định tên của liên kết. Trong trường hợp của chúng tôi, chúng tôi đã thêm liên kết đến trang web Linuxhint của chúng tôi.

Hình ảnh được cung cấp bên dưới cho biết rằng liên kết được thêm vào được đặt ở phía bên trái theo mặc định:

Bây giờ chuyển đến CSS để căn giữa liên kết.

Ở đây, chúng tôi sẽ sử dụng “ một ”Để truy cập liên kết đã thêm. Sau đó, đặt giá trị của text-align là “ trung tâm ”Và hiển thị là“ khối ”. Do đó, phần tử sẽ được thêm vào như một phần tử khối, bắt đầu từ một dòng mới và chiếm toàn bộ chiều rộng.

CSS

Ghi chú: Thuộc tính căn chỉnh văn bản CSS không hoạt động một mình để căn giữa thẻ. Do đó, bạn phải sử dụng “ trưng bày 'Thuộc tính và đặt giá trị của nó' khối ”Để căn giữa liên kết.

Bây giờ, hãy chuyển sang HTML và thực thi nó để xem kết quả sau. Tại đây, bạn có thể thấy rằng liên kết được căn chỉnh ở giữa trang web:

Hãy chuyển sang phương pháp thứ hai để căn chỉnh liên kết ở trung tâm.

Phương pháp 2: Liên kết trung tâm trong CSS sử dụng thuộc tính “margin”

Trong CSS, “ lề ”Thuộc tính được sử dụng để căn giữa liên kết. Nó là thuộc tính viết tắt của “ lề trái ',' lề phải ',' margin-top ', và ' margin-bottom ' đặc tính. Bạn có thể đặt các giá trị của tất cả các thuộc tính đã cho trong một dòng duy nhất.

Cú pháp

Cú pháp của thuộc tính ký quỹ là:

Mô tả cú pháp được cung cấp ở trên được đưa ra dưới đây:

• Tự động: Nó được sử dụng để thiết lập các phần tử theo trình duyệt.
• đứng đầu: Nó được sử dụng để đặt lề từ trên xuống.
• bên phải: Nó được sử dụng để đặt lề từ bên phải.
• cái nút: Nó được sử dụng để đặt lề từ dưới lên.
• bên trái: Nó được sử dụng để đặt lề từ bên trái.

Ghi chú: Việc chỉ định hai giá trị sẽ biểu thị lề từ trên xuống dưới và lề từ trái và phải; tuy nhiên, nếu một giá trị được thêm vào, mức ký quỹ sẽ được áp dụng cho cả bốn cạnh.

Hãy chuyển sang ví dụ, nơi chúng ta sẽ căn giữa một liên kết bằng cách sử dụng “ lề ' tài sản.

Thí dụ

Đầu tiên hãy đặt giá trị của thuộc tính hiển thị là “ khối ”Và chiều rộng là“ 70px ”. Sau đó, áp dụng thuộc tính ký quỹ và đặt giá trị của nó thành “ Tự động ”:

Ghi chú: Các ' trưng bày ' và ' bề rộng ”Tài sản là cần thiết để thiết lập; nếu không ' lề ”Tài sản sẽ không hoạt động. Giá trị của thuộc tính chiều rộng có thể được đặt theo độ phân giải của màn hình hiển thị và chiều dài của văn bản.

Bạn có thể thấy từ hình ảnh đã cho rằng liên kết được căn giữa thành công:

Đó là nó! Chúng tôi đã giải thích các phương pháp để căn giữa liên kết.

Sự kết luận

Các ' căn chỉnh văn bản ' và ' lề Thuộc tính 'được sử dụng để căn giữa liên kết với sự đóng góp của' trưng bày ' và ' bề rộng ' tài sản. Thuộc tính display là cần thiết cùng với thuộc tính text-align, trong khi sử dụng thuộc tính margin, cả thuộc tính display và width đều bắt buộc phải căn giữa liên kết. Hướng dẫn này đã thảo luận về các phương pháp khác nhau để căn giữa một liên kết trong CSS.