Cách Căn Giữa Hoặc Căn Chỉnh Văn Bản Và Image Trên Trang Web ...

Trang chủ » Căn ảnh Vào Giữa Html » Cách Căn Giữa Hoặc Căn Chỉnh Văn Bản Và Image Trên Trang Web ...

Có thể bạn quan tâm

×

09.66.61.63.68

support@glx.com.vn

×

Copyright© GalaxyCloud Company. All Reserved.

Sử dụng nội dung ở trang này và dịch vụ tại GalaxyCloud có nghĩa là bạn đồng ý với Thỏa thuận sử dụng và Chính sách bảo mật của chúng tôi.

Công ty TNHH Galaxy Việt Nam - Giấy phép kinh doanh số: 01.05.02.94.86 cấp ngày 06/12/2010 bởi Sở Kế Hoạch và Đầu Tư Tp. Hà Nội

Bài viết / Web / Html 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

Cách thêm hình nền vào phần trên cùng của trang web bằng HTML 2020-09-14 Cách thêm image profile theo kiểu vào trang web của bạn bằng HTML 2020-09-14 Cách thêm HTML Thành phần cho trang web của bạn 2020-09-14 Cách tạo và liên kết đến các trang web bổ sung bằng HTML 2020-09-14 Cách thêm và tạo kiểu tiêu đề cho trang web của bạn bằng HTML 2020-09-14 Cách thiết lập dự án trang web HTML của bạn 2020-09-14 Cách tạo kiểu cho HTML Thành phần 2020-09-14 Cách thêm hình nền vào phần trên cùng của trang web bằng HTML 2020-09-14 Cách thêm image profile theo kiểu vào trang web của bạn bằng HTML 2020-09-14 Cách sử dụng , Phần tử Phân chia Nội dung HTML 2020-08-27

Từ khóa » Căn ảnh Vào Giữa Html