Tải về bản PDF Tải về bản PDF

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]

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

  1. 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></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. 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. 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. 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. 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><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. 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 của 2:
Sử dụng thẻ center trong HTML

  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. 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. 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. 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

Hack GmailHack Gmail
Lồng một ảnh vào trong ảnh khác trên PhotoshopLồng một ảnh vào trong ảnh khác trên Photoshop
Tắt McAfeeTắt McAfee
Xóa bỏ phông nền trong Adobe IllustratorXóa bỏ phông nền trong Adobe Illustrator
Mở khóa layer trong PhotoshopMở khóa layer trong Photoshop
In nhiều trang một mặt trong Adobe ReaderIn nhiều trang một mặt trong Adobe Reader
Xoay video trong Adobe Premiere ProXoay video trong Adobe Premiere Pro
Chỉnh kích thước artboard trong Adobe IllustratorChỉnh kích thước artboard trong Adobe Illustrator
Thêm hiệu ứng trong suốt trong PhotoshopThêm hiệu ứng trong suốt trong Photoshop
Khởi chạy tập tin Python bằng Windows Command PromptKhởi chạy tập tin Python bằng Windows Command Prompt
Chụp màn hình trên máy tính DellChụp màn hình trên máy tính Dell
Tạo ảnh nền trong suốt trên PaintTạo ảnh nền trong suốt trên Paint
Mở tập tin EXE trên MacbookMở tập tin EXE trên Macbook
Tạo bảng trong Adobe IllustratorTạo bảng trong Adobe Illustrator
Quảng cáo

Về bài wikiHow này

Nicole Levine, MFA
Cùng viết bởi:
Tác giả & Biên tập viên viết về công nghệ
Bài viết này đã được cùng viết bởi Nicole Levine, MFA. Nicole Levine là một tác giả và biên tập viên của wikiHow chuyên viết về công nghệ. Bà có hơn 20 năm kinh nghiệm phát triển tài liệu kỹ thuật và quản lý các nhóm hỗ trợ tại các công ty lớn về phần mềm và dịch vụ lưu trữ trang web. Nicole cũng có bằng MFA về viết sáng tạo của Đại học Bang Portland và dạy sáng tác tác phẩm, viết tiểu thuyết và viết tạp chí tại nhiều tổ chức khác nhau. Bài viết này đã được xem 28.836 lần.
Chuyên mục: Phần mềm
Trang này đã được đọc 28.836 lần.

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

Quảng cáo