Thứ hai, 14/09/2020 | 00:00 GMT+7

Cách Căn giữa hoặc Căn chỉnh Văn bản và image trên Trang web của Bạn bằng HTML

Một phần của loạt bài: Cách xây dựng trang web bằng HTML

Loạt bài hướng dẫn này sẽ hướng dẫn bạn cách tạo và tùy chỉnh thêm trang web này bằng HTML, ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để hiển thị tài liệu trong trình duyệt web. Không cần trải nghiệm viết mã trước nhưng ta khuyên bạn nên bắt đầu từ đầu loạt bài nếu bạn muốn tạo lại trang web trình diễn.

Ở phần cuối của loạt bài này, bạn sẽ có một trang web sẵn sàng để triển khai lên cloud và làm quen cơ bản với HTML. Biết cách viết HTML sẽ cung cấp nền tảng vững chắc để học các kỹ năng phát triển web front-end bổ sung, chẳng hạn như CSS và JavaScript.

Căn chỉnh nội dung ở giữa, trái hoặc phải có thể hữu ích cho việc sắp xếp nội dung trên trang web . Trong hướng dẫn này, ta sẽ học cách căn chỉnh văn bản bằng HTML.

Để căn chỉnh văn bản trên trang web, ta có thể sử dụng thuộc tính style và thuộc tính text-align.

Ví dụ: đoạn mã sau sẽ căn giữa văn bản "Văn bản mẫu":

<p style="text-align:center;">Sample text</p>

Để căn chỉnh nội dung HTML của bạn sang trái hoặc phải, bạn sẽ thay thế center bằng left hoặc right .

Trong hướng dẫn này, ta sẽ xem xét quá trình sử dụng thuộc tính text-align để căn giữa hình ảnh và văn bản trong phần trên cùng của trang web như được minh họa trong trang web trình diễn của ta .

Để căn giữa nội dung này, ta sẽ thêm thuộc tính text-align vào phần tử <div> có chứa hình nền, hình ảnh profile , tiêu đề, phụ đề và liên kết ở phần trên cùng của trang chủ.

Tìm phần tử <div> trong index.html của bạn và thêm văn bản được đánh dấu như sau:

... <!--First section--> <div style="background-image: url('https://html.sammy-codes.com/images/background.jpg'); background-size: cover; height:480px; padding-top: 80px; text-align: center;">   <img src="https://html.sammy-codes.com/images/small-profile.jpeg" style="height:150px; border-radius: 50%; border: 10px solid #FEDE00;">   <h1 style="font-size:100px; color:white; margin:10px;">Sammy the Shark</h1>   <p style="font-size:30px; color: white;"><em>Senior Selachimorpha at DigitalOcean</em></p>   <p style="font-size: 20px; color:#1F9AFE;"><a href="Webpage FilePath";>About this site</a></p> </div> ...

Chỉ sao chép và thêm thuộc tính text-align đánh dấu vì các phần khác của mã HTML này sẽ không dành riêng cho dự án của bạn. Lưu file của bạn và reload trong trình duyệt. Bạn sẽ nhận được thông tin như thế này:

Căn giữa nội dung

Đến đây bạn sẽ hiểu cách căn giữa và căn chỉnh văn bản và có một phần giống như phần trên cùng của trang trình diễn . Trong hướng dẫn tiếp theo, ta sẽ tạo lại phần giữa của trang trình diễn.

Tags:

Các tin liên quan

, Phần tử Phân chia Nội dung HTML
2020-08-27