Cách căn giữa văn bản trong HTML
Một trong những điều đầu tiên chúng ta học với tư cách là lập trình viên là cách căn chỉnh các khối văn bản. Trong bài viết này, chúng ta sẽ xem xét cách căn chỉnh văn bản ở giữa vùng chứa của bạn bằng cách sử dụng các thuộc tính kiểu và căn chỉnh.
Thuộc tính kiểu
Khi chúng ta đang làm việc với div trong html, chúng ta có thể sử dụng thuộc tính style để kết hợp tạo kiểu nội tuyến. Chúng tôi sẽ sử dụng thuộc tính CSS text-align để căn giữa văn bản của chúng ta trong <div> .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center with Style Attribute</title>
</head>
<body>
<div class="container" style="text-align:center;">
<p>Text to center</p>
</div>
</body>
</html> Căn chỉnh các thuộc tính
Chúng ta có thể sử dụng các thuộc tính align khi chúng ta làm việc với các bảng trong HTML. Nó sẽ chỉ hoạt động trên <col> , <colgroup> , <tbody> , <td> , <tfoot> , <th> , <thead> , <tr> các yếu tố.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Center with Align Attribute</title>
</head>
<body>
<table border=1 width="800" align="center">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr align="center">
<td>January</td>
<td>$100</td>
</tr>
<tr align="center">
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
Điều quan trọng cần nhớ khi bạn học căn giữa văn bản là căn chỉnh phụ thuộc vào vùng chứa nó nằm trong đó. Nếu vùng chứa chỉ chiếm một nửa trang, nó sẽ căn giữa theo chiều dài của vùng chứa đó chứ không phải toàn bộ trang.
Thats tất cả để có nó! Bây giờ bạn biết cách căn giữa văn bản trên <div> phần tử và <table> các yếu tố.