วิธีการจัดกึ่งกลางข้อความใน HTML
สิ่งแรกที่เราเรียนรู้ในฐานะโปรแกรมเมอร์คือวิธีจัดแนวกลุ่มข้อความ ในบทความนี้ เราจะมาดูวิธีจัดแนวข้อความให้อยู่ตรงกลางคอนเทนเนอร์ของคุณโดยใช้สไตล์และจัดแนวแอตทริบิวต์
คุณสมบัติของสไตล์
เมื่อเราทำงานกับ div ใน html เราสามารถใช้แอตทริบิวต์ style เพื่อรวมการจัดรูปแบบอินไลน์ได้ เราจะใช้คุณสมบัติ CSS text-align เพื่อจัดกึ่งกลางข้อความของเราใน <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> จัดแนวแอตทริบิวต์
เราสามารถใช้แอตทริบิวต์ align เมื่อเราทำงานกับตารางในรูปแบบ HTML มันจะใช้งานได้กับ <col> . เท่านั้น , <colgroup> , <tbody> , <td> , <tfoot> , <th> , <thead> , <tr> องค์ประกอบ
<!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>
สิ่งสำคัญที่ต้องจำไว้เมื่อคุณกำลังเรียนรู้ที่จะจัดข้อความให้อยู่ตรงกลางคือการจัดตำแหน่งนั้นขึ้นอยู่กับคอนเทนเนอร์ที่มันอยู่ ถ้าคอนเทนเนอร์ใช้พื้นที่เพียงครึ่งหน้า คอนเทนเนอร์นั้นจะจัดกึ่งกลางตามความยาวของคอนเทนเนอร์นั้น ไม่ใช่ทั้งหน้า
นั่นคือทั้งหมดที่มีให้! ตอนนี้คุณรู้วิธีจัดกึ่งกลางข้อความใน <div> องค์ประกอบและ <table> องค์ประกอบ
