Cách để Căn Giữa Văn Bản Trên HTML - WikiHow

Skip to Content
  • Trang đầu
  • Ngẫu nhiên
  • Duyệt các Chuyên mục
  • Giới thiệu về wikiHow
  • Đăng nhập / Đăng ký
Các chính sáchCách để Căn giữa văn bản trên HTML PDF download Tải về bản PDF Cùng viết bởi Nhân viên của wikiHow PDF download Tải về bản PDF X

Bài viết này có đồng tác giả là đội ngũ biên tập viên và các nhà nghiên cứu đã qua đào tạo, những người xác nhận tính chính xác và toàn diện của bài viết. Nhóm Quản lý Nội dung của wikiHow luôn cẩn trọng giám sát công việc của các biên tập viên để đảm bảo rằng mọi bài viết đều đạt tiêu chuẩn chất lượng cao. Bài viết này đã được xem 120.545 lần.

Trong bài viết này: Bằng CSS Sử dụng thẻ center trong HTML Bài viết có liên quan Tham khảo

wikiHow hôm nay sẽ hướng dẫn bạn cách căn giữa văn bản trên website HTML bằng ngôn ngữ lập trình CSS (Cascading Style Sheets). Việc căn giữa văn bản trên HTML được thực hiện bằng thẻ <center>, nhưng thẻ này bị cho là lỗi thời và không còn hoạt động trên hầu hết các trình duyệt.[1]

Các bước

Phương pháp 1 Phương pháp 1 của 2:

Bằng CSS

PDF download Tải về bản PDF
  1. Step 1 Mở tập tin chứa phong cách CSS. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/da\/2974143-7.jpg\/v4-460px-2974143-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/da\/2974143-7.jpg\/v4-728px-2974143-7.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1 Mở tập tin chứa phong cách CSS. Mặc dù thẻ <center> đã lỗi thời nhưng bạn vẫn có thể tạo phần tử mới để thêm vào bất cứ phần nào trên trang nhằm căn giữa văn bản trong ranh giới của chúng. Nếu chưa có tập tin riêng dành cho CSS, bạn cần xác định phong cách ở đầu tập tin HTML, giữa các thẻ "<style>" và "</style>".[2]
    • Nếu như chưa có thẻ <style> và </style>, bạn cần thêm trực tiếp vào bên dưới thẻ <body> ở đầu tập tin như sau:
    • <!DOCTYPE html> <html> <body> <style> </style>
  2. Step 2 Tạo lớp căn giữa văn bản. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ef\/2974143-8.jpg\/v4-460px-2974143-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ef\/2974143-8.jpg\/v4-728px-2974143-8.jpg","smallWidth":460,"smallHeight":349,"bigWidth":728,"bigHeight":553,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2 Tạo lớp căn giữa văn bản. Thẻ <div> sẽ yêu cầu tài liệu HTML tham chiếu phần văn bản cụ thể, vì thế bạn cần tạo lớp cho thẻ này. Hãy nhập nội dung sau vào khoảng cách giữa thẻ "style", đừng quên nhấn Enter hai lần sau dòng đầu:
      div.a { }
  3. Step 3 Thêm thuộc tính text-align. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/97\/2974143-9.jpg\/v4-460px-2974143-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/97\/2974143-9.jpg\/v4-728px-2974143-9.jpg","smallWidth":460,"smallHeight":341,"bigWidth":728,"bigHeight":540,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3 Thêm thuộc tính text-align. Nhập text-align: center; vào khoảng cách giữa hai dấu ngoặc nhọn trong phần div.a. Tiêu đề hiện tại sẽ trông như sau:
      <!DOCTYPE html> <html> <body> <style> div.a { text-align: center; } </style>
  4. Step 4 Thêm thẻ div thích hợp vào văn bản cần được căn giữa. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7e\/2974143-11.jpg\/v4-460px-2974143-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7e\/2974143-11.jpg\/v4-728px-2974143-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4 Thêm thẻ div thích hợp vào văn bản cần được căn giữa. Tiến hành bằng cách đặt thẻ <div class="a"> vào phía trên văn bản mà bạn muốn căn giữa và đóng lại bằng thẻ </div> bên dưới văn bản mà bạn muốn căn giữa. Ví dụ, để căn giữa tiêu đề và đoạn văn mở đầu, bạn cần nhập như sau:
      <div class="a"> <h1>Welcome to My Website</h1> <p>This website is primarily for the purpose of providing information about things.</p> </div>
  5. Step 5 Sử dụng thẻ div.a để căn giữa những vùng khác. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/87\/2974143-12.jpg\/v4-460px-2974143-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/87\/2974143-12.jpg\/v4-728px-2974143-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5 Sử dụng thẻ div.a để căn giữa những vùng khác. Nếu bạn muốn căn giữa phần tử khác (ví dụ: nội dung giữa các thẻ như <p></p> và <h2></h2>), hãy nhập <div class="a"> vào trước văn bản và </div> vào sau đó. Vì bạn đã chỉ định "div.a" làm lệnh căn giữa nên văn bản này cũng sẽ nằm giữa tương tự như phần trước đó:
      <style> div.a { text-align: center; } </style> <div class="a"> <h2>Donations Welcome</h2> <p>please</p> </div>
  6. Step 6 Xem lại tài liệu. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0d\/2974143-13.jpg\/v4-460px-2974143-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0d\/2974143-13.jpg\/v4-728px-2974143-13.jpg","smallWidth":460,"smallHeight":341,"bigWidth":728,"bigHeight":540,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 6 Xem lại tài liệu. Tuy rằng nội dung có thể khác nhau nhưng nhìn chung tài liệu của bạn bây giờ sẽ trông tương tự như sau:[3]
      <!DOCTYPE html> <html> <body> <style> div.a { text-align: center; } </style> <div class="a"> <h1>Welcome to My Website</h1> <p>This website is primarily for the purpose of providing information about things.</p> </div> <div class="a"> <h2>Donations Welcome</h2> <p>please</p> </div> </body> </html>
    Quảng cáo
Phương pháp 2 Phương pháp 2 của 2:

Sử dụng thẻ center trong HTML

PDF download Tải về bản PDF
  1. 1 Mở tài liệu HTML. Phương pháp này mô tả cách sử dụng thẻ HTML <center> (hiện cũng đã lỗi thời). Kể từ tháng 12/2018, thẻ này vẫn hoạt động trên một số trình duyệt web, tuy nhiên về lâu dài thì bạn vẫn không nên sử dụng thẻ này.
  2. Step 2 Xác định văn bản mà bạn muốn căn giữa. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/53\/2974143-2.jpg\/v4-460px-2974143-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/53\/2974143-2.jpg\/v4-728px-2974143-2.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2 Xác định văn bản mà bạn muốn căn giữa. Cuộn xuống cho đến khi bạn tìm thấy tiêu đề, đoạn văn hay văn bản khác mà bạn muốn căn giữa.
  3. Step 3 Thêm thẻ "center" vào hai đầu văn bản. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cd\/2974143-3.jpg\/v4-460px-2974143-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cd\/2974143-3.jpg\/v4-728px-2974143-3.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3 Thêm thẻ "center" vào hai đầu văn bản. Thẻ center này có định dạng <center>text</center>, trong đó "text" là văn bản cần được căn giữa. Nếu văn bản đã có thẻ bên trong (ví dụ: "<p></p>" đối với đoạn văn bản), thẻ "center" có thể nằm ngoài những thẻ đã tồn tại trước đó:
      <center><h1>Welcome to My Website</h1></center> <center>Make yourself at home!</center>
  4. Step 4 Xem lại tài liệu HTML. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cb\/2974143-4.jpg\/v4-460px-2974143-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cb\/2974143-4.jpg\/v4-728px-2974143-4.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4 Xem lại tài liệu HTML. Tài liệu bây giờ sẽ trông như sau:[4]
      <!DOCTYPE html> <html> <body> <h1><center>Welcome to My Website</center></h1> <center>Make yourself at home!</center> <p1>The purpose of this website is to display information about things.</p1> </body> </html>
    Quảng cáo

Bài viết wikiHow có liên quan

Mở Tập tin EPUBCách đểMở Tập tin EPUB Chèn ảnh vào Excel sao cho tự động vừa với các ôCách đểChèn ảnh vào Excel sao cho tự động vừa với các ô Tắt McAfeeCách đểTắt McAfee Mở tập tin EXE trên MacbookCách đểMở tập tin EXE trên Macbook Khởi chạy tập tin Python bằng Windows Command PromptCách đểKhởi chạy tập tin Python bằng Windows Command Prompt Tạo ra áo trong RobloxCách đểTạo ra áo trong Roblox Mở tập tin DLLCách đểMở tập tin DLL Viết mã giảCách đểViết mã giả Xóa bỏ phông nền trong Adobe IllustratorCách đểXóa bỏ phông nền trong Adobe Illustrator Chỉnh kích thước artboard trong Adobe IllustratorCách đểChỉnh kích thước artboard trong Adobe Illustrator Trải nghiệm Bumble Premium miễn phíCách đểTrải nghiệm Bumble Premium miễn phí Chèn ảnh trong InDesignCách đểChèn ảnh trong InDesign Quảng cáo

Tham khảo

  1. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center
  2. https://www.w3schools.com/css/css_align.asp
  3. https://www.w3schools.com/cssref/pr_text_text-align.asp
  4. https://www.w3schools.com/tags/tag_center.asp

Về bài wikiHow này

Nhân viên của wikiHow Cùng viết bởi: Nhân viên của wikiHow Người viết bài của wikiHow Bài viết này có đồng tác giả là đội ngũ biên tập viên và các nhà nghiên cứu đã qua đào tạo, những người xác nhận tính chính xác và toàn diện của bài viết. Nhóm Quản lý Nội dung của wikiHow luôn cẩn trọng giám sát công việc của các biên tập viên để đảm bảo rằng mọi bài viết đều đạt tiêu chuẩn chất lượng cao. Bài viết này đã được xem 120.545 lần. Chuyên mục: Phần mềm Ngôn ngữ khác Tiếng Anh Tiếng Bồ Đào Nha Tiếng Italy Tiếng Đức Tiếng Tây Ban Nha Tiếng Pháp Tiếng Trung Tiếng Nga Tiếng Indonesia Tiếng Ả Rập Tiếng Thái Tiếng Nhật Tiếng Hà Lan
  • In
Trang này đã được đọc 120.545 lần.

Bài viết này đã giúp ích cho bạn?

Có Không Quảng cáo Cookie cho phép wikiHow hoạt động tốt hơn. Bằng việc tiếp tục sử dụng trang web của chúng tôi, bạn đồng ý với chính sách cookie của chúng tôi.

Bài viết có liên quan

Mở Tập tin EPUBCách đểMở Tập tin EPUBChèn ảnh vào Excel sao cho tự động vừa với các ôCách đểChèn ảnh vào Excel sao cho tự động vừa với các ôTắt McAfeeCách đểTắt McAfeeMở tập tin EXE trên MacbookCách đểMở tập tin EXE trên Macbook

Các bài viết hướng dẫn nổi bật

Xem Instagram riêng tư của người khác mà không cần theo dõi: sự thực và 3 cách thay thếXem Instagram riêng tư của người khác mà không cần theo dõi: sự thực và 3 cách thay thếXem đường chỉ tay hôn nhân: độ dài, độ cong và các đặc điểm riêng biệtXem đường chỉ tay hôn nhân: độ dài, độ cong và các đặc điểm riêng biệtBiết ai đã chia sẻ bài đăng trên Instagram của bạn lên Story của họBiết ai đã chia sẻ bài đăng trên Instagram của bạn lên Story của họ17 dấu hiệu cho biết chàng thầm yêu bạn17 dấu hiệu cho biết chàng thầm yêu bạn

Các bài viết hướng dẫn phổ biến

Tìm kiếm thông tin về ai đó bằng hình ảnhCách đểTìm kiếm thông tin về ai đó bằng hình ảnhEmoji 🗿 (biểu tượng mặt đá) có ý nghĩa gì?Emoji 🗿 (biểu tượng mặt đá) có ý nghĩa gì?Phù phép trong MinecraftCách đểPhù phép trong MinecraftBật xem trước ảnh trong thư mục (Windows 10)Cách đểBật xem trước ảnh trong thư mục (Windows 10)Chuyển từ thập phân sang thập lục phânCách đểChuyển từ thập phân sang thập lục phânDùng thẻ màu chữ trên HTMLCách đểDùng thẻ màu chữ trên HTML

Các bài viết hướng dẫn nổi bật

3 cách đơn giản giúp bạn đăng nhập Instagram không cần mã xác minh3 cách đơn giản giúp bạn đăng nhập Instagram không cần mã xác minh15 dấu hiệu kín đáo cho thấy nàng bị bạn thu hút15 dấu hiệu kín đáo cho thấy nàng bị bạn thu hútPhải làm gì khi con gái không trả lời tin nhắn của bạn: 13 kiểu tin nhắn mà bạn có thể gửi cho cô ấyPhải làm gì khi con gái không trả lời tin nhắn của bạn: 13 kiểu tin nhắn mà bạn có thể gửi cho cô ấyChọn thuê người yêu đóng thế: 8 lời khuyên dành cho bạnChọn thuê người yêu đóng thế: 8 lời khuyên dành cho bạn

Các bài viết hướng dẫn nổi bật

Xem video đã xóa trên YouTube bằng WayBack MachineXem video đã xóa trên YouTube bằng WayBack MachineXem ai không theo dõi lại bạn trên InstagramXem ai không theo dõi lại bạn trên Instagram15 dấu hiệu tiết lộ người cũ sẽ quay lại với bạn15 dấu hiệu tiết lộ người cũ sẽ quay lại với bạn175 câu bắt chuyện thú vị và hấp dẫn để tiêu khiển với bạn bè175 câu bắt chuyện thú vị và hấp dẫn để tiêu khiển với bạn bè

Các bài viết hướng dẫn nổi bật

5 cách để tìm một người trên Tinder5 cách để tìm một người trên TinderĂn chuối để thải độc đường ruộtĂn chuối để thải độc đường ruột5 cách dễ dàng để biết ai đó đã chặn bạn trên Discord5 cách dễ dàng để biết ai đó đã chặn bạn trên DiscordKể về bản thân trên ứng dụng hẹn hòKể về bản thân trên ứng dụng hẹn hò

Các bài viết hướng dẫn nổi bật

Tại sao một anh chàng cứ nhìn bạn chằm chằm? 11 lý do và cách phản hồiTại sao một anh chàng cứ nhìn bạn chằm chằm? 11 lý do và cách phản hồi14 dấu hiệu cho thấy chàng muốn tính chuyện lâu dài với bạn14 dấu hiệu cho thấy chàng muốn tính chuyện lâu dài với bạn70+ câu trả lời thú vị, ngọt ngào và lãng mạn khi người yêu hỏi bạn yêu họ nhiều như thế nào70+ câu trả lời thú vị, ngọt ngào và lãng mạn khi người yêu hỏi bạn yêu họ nhiều như thế nào9 cách đơn giản giúp bạn nhận biết người có nhiều tài khoản Instagram9 cách đơn giản giúp bạn nhận biết người có nhiều tài khoản Instagram wikiHow
  • Chuyên mục
  • Máy tính và Điện tử
  • Phần mềm
  • Trang chủ
  • Giới thiệu về wikiHow
  • Các chuyên gia
  • Liên hệ với chúng tôi
  • Sơ đồ Trang web
  • Điều khoản Sử dụng
  • Chính sách về Quyền riêng tư
  • Do Not Sell or Share My Info
  • Not Selling Info

Theo dõi chúng tôi

--566

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