HTML에서 텍스트를 가운데에 맞추는 방법
프로그래머로서 우리가 가장 먼저 배우는 것 중 하나는 텍스트 블록을 정렬하는 방법입니다. 이 기사에서는 스타일 및 정렬 속성을 사용하여 컨테이너 중앙에 텍스트를 정렬하는 방법을 살펴보겠습니다.
스타일 속성
html에서 div로 작업할 때 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> 속성 정렬
HTML의 테이블로 작업할 때 align 속성을 사용할 수 있습니다. <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> 집단.