Căn giữa trong HTML

Trong bài viết này Hãy cùng webaffiliatevn.com tìm hiểu Căn giữa trong HTML nhé

1. Sử dụng thẻ <center>

Mô tả: Thẻ HTML <center> được sử dụng để căn giữa nội dung.

Ví dụ:

<!DOCTYPE html>
<html>

   <head>
      <title>Thẻ center trong HTML</title>
   </head>

   <body>
      <center>Đây là đoạn được căn giữa</center>
   </body>

</html>

See the Pen LYNYaEo by DavidKhai (@davidkhai) on CodePen.dark

 

2. Sử dụng thuộc tính style

Để đặt căn chỉnh văn bản trong HTML, hãy sử dụng thuộc tính style. Thuộc tính style chỉ định kiểu nội tuyến cho một phần tử. Thuộc tính được sử dụng với thẻ HTML <p>, với thuộc tính CSS căn chỉnh văn bản cho căn giữa, căn trái và phải. HTML5 không hỗ trợ thuộc tính căn chỉnh của thẻ <p>, do đó, kiểu CSS được sử dụng để đặt căn chỉnh văn bản.

Chỉ cần lưu ý, việc sử dụng thuộc tính style sẽ ghi đè bất kỳ kiểu nào được đặt trên toàn web. Nó sẽ ghi đè bất kỳ kiểu nào được đặt trong thẻ <style> HTML hoặc biểu định kiểu ngoài.

Ví dụ:

Bạn có thể thử chạy đoạn mã sau để đặt căn chỉnh văn bản trong HTML

<!DOCTYPE html>
<html>
   <head>
      <title>Ví dụ căn giữa trong HTML</title>
   </head>

   <body>
      <h1>Webaffiliate</h1>
      <p style="text-align:center;">Đây là đoạn được căn giữa</p>
   </body>
</html>

See the Pen KKzKEdy by DavidKhai (@davidkhai) on CodePen.dark

 

3. Căn giữa thẻ div

Để căn giữa phần tử div, bạn có thể sử dụng “div style =” text-align: center “” và để căn giữa div, hãy sử dụng “div style =” margin: 0 auto “”

Ví dụ:

Trong mã của bạn, css trên sẽ được viết là:

<!DOCTYPE html>
<html>
   <head>
      <title>Ví dụ căn giữa thẻ div trong HTML</title>
   </head>

   <body>
      <h1>Webaffiliate</h1>
      <div style="text-align:center;width: 300px;margin: 0 auto;border-style: dotted;">
<p>Xin chào!!!</p>
</div>
   </body>
</html>

See the Pen PoNoLZG by DavidKhai (@davidkhai) on CodePen.dark

 

4. Căn giữa văn bản trong các ô của bảng trong HTML

Để căn giữa văn bản trong các ô của bảng, hãy sử dụng thuộc tính CSS text-align. Thuộc tính căn chỉnh thẻ <table> đã được sử dụng trước đây, nhưng HTML5 không dùng thuộc tính này. Đừng sử dụng nó. Vì vậy, hãy sử dụng CSS để căn chỉnh văn bản trong các ô của bảng. Căn chỉnh văn bản sẽ được sử dụng cho thẻ <td>.

Chúng tôi đang sử dụng thuộc tính style để thêm CSS. Thuộc tính style chỉ định kiểu nội tuyến cho một phần tử. Thuộc tính được sử dụng với thẻ HTML <td>, với thuộc tính CSS text-align. HTML5 không hỗ trợ thẻ căn chỉnh,

Chỉ cần lưu ý, việc sử dụng thuộc tính style sẽ ghi đè bất kỳ style nào được thiết lập trên web. Nó sẽ ghi đè bất kỳ kiểu nào được đặt trong thẻ HTML <style> hoặc bảng định kiểu bên ngoài.

Để căn chỉnh văn bản, hãy đặt ô trong bảng là căn trái, phải hoặc căn giữa

Ví dụ:

Bạn có thể thử chạy đoạn mã sau để căn giữa văn bản trong các ô của bảng trong HTML

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, td, th {
            border: 1px solid black;
            width: 300px;
         }
      </style>
   </head>
   <body>
      <h1>Thông tin khách hàng</h1>
      <table>
         <tr>
            <th>Mã khách hàng</th>
            <th>Tên khách hàng</th>
         </tr>
         <tr>
            <td style="text-align:center">1</td>
            <td style="text-align:center">Nguyễn Văn A</td>
         </tr>
        <tr>
            <td style="text-align:center">2</td>
            <td style="text-align:center">Nguyễn Thị B</td>
         </tr>
      </table>
   </body>
</html>

See the Pen JjXjzXV by DavidKhai (@davidkhai) on CodePen.dark

5. Căn giữa tiêu đề trong HTML

Các tiêu đề trong HTML có 6 thẻ, <h1> đến <h6>. Để đặt căn chỉnh tiêu đề trong HTML, hãy sử dụng thuộc tính style. Thuộc tính style chỉ định kiểu nội tuyến cho một phần tử. Thuộc tính được sử dụng với thẻ HTML <h1> đến <h6>, với thuộc tính CSS text-align. HTML5 không hỗ trợ thuộc tính căn chỉnh của thẻ tiêu đề, vì vậy kiểu CSS được sử dụng để đặt căn chỉnh.

Chỉ cần lưu ý, việc sử dụng thuộc tính style sẽ ghi đè bất kỳ style nào được thiết lập trên web. Nó sẽ ghi đè bất kỳ kiểu nào được đặt trong thẻ HTML <style> hoặc bảng định kiểu bên ngoài.

Ví dụ:

Bạn có thể thử chạy đoạn mã sau để đặt căn chỉnh tiêu đề trong HTML

<!DOCTYPE html>
<html>
   <head>
      <title>Ví dụ về căn giữa tiêu đề trong HTMl</title>
   </head>

   <body>
      <h1 style="text-align:center">Webaffiliate</h1>
   </body>
</html>

See the Pen dyMyrpy by DavidKhai (@davidkhai) on CodePen.dark

 

6. Căn giữa một phần tử theo chiều dọc và chiều ngang với CSS

Để căn giữa một phần tử theo chiều dọc và chiều ngang với CSS, mã như sau:

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      font-family: "segoe ui light", Tahoma, Geneva, Verdana, sans-serif;
   }
   .centered {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100px;
      border: 2px solid red;
   }
</style>
</head>
<body>
<h1>Ví dụ về căn giữa trong HTML</h1>
<div class="centered">
<h2>Đây là đoạn văn được căn giữa theo chiều ngang và chiều dọc</h2>
</div>
</body>
</html>

See the Pen xxVxBEe by DavidKhai (@davidkhai) on CodePen.dark

>>> Xem thêm:

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *