HTML

스타일 요소 - 글자 가운데 정렬하기

Questioner 2024. 12. 6. 00:27 
<html>
    <head>
        <title>2024-12-03-火</title>
    </head>
    <body>
        <h1>Language-weaver</h1>
        <p>Language-weaver</p>
    </body>
</html>

 
아무 스타일 적용도 하지 않았을 때, 기본적으로 글자는 왼쪽 정렬 됩니다.
오른쪽 정렬이나 가운데 정렬을 하고 싶을 때는 정렬 속성을 사용해야 합니다.
 
 

<html>
    <head>
        <title>2024-12-03-火</title>
    </head>
    <body>
        <h1>Language-weaver</h1>
        <p>Language-weaver</p>
        <p style="text-align: left">Language-weaver2</p> 
        <p style="text-align: center">Language-weaver3</p> 
        <p style="text-align: right">Language-weaver4</p> 
    </body>
</html>

 
이렇게 정렬 속성을 지정하면, 글자의 가운데 정렬과 왼쪽 정렬도 가능합니다.
 

글자의 가운데 정렬 속성속성 설명
style="text-align: left"왼쪽 정렬 (기본값)
style="text-align: center"가운데 정렬
style="text-align: right"오른쪽 정렬

 
 
주의할 점으로,
text-align 속성은 <span> 태그와 같은 인라인 속성을 가진 태그에서는 동작이 안 된다고 하니
인라인 태그를 사용하게 될 경우에는 부모 태그에 부여하면 되겠습니다.