CSS 텍스트 정렬

텍스트 정렬

text-align 속성은 텍스트의 수평 정렬 방식을 설정합니다.

텍스트는 왼쪽 정렬, 오른쪽 정렬 또는 가운데 정렬로 정렬할 수 있습니다.

아래 예시는 가운데 정렬 및 왼쪽 정렬의 텍스트를 보여줍니다(문자 방향이 왼쪽에서 오른쪽으로 이동하면 기본적으로 왼쪽 정렬; 문자 방향이 오른쪽에서 왼쪽으로 이동하면 기본적으로 오른쪽 정렬입니다):

예제

h1 {
  text-align: center;
}
h2 {
  text-align: left;
}
h3 {
  text-align: right;
}

직접 시도해 보세요

당 text-align 속성이 "justify"로 설정되면, 각 행을 확장하여 각 행이 같은 너비를 가지도록 하고, 왼쪽과 오른쪽 여백이 고정됩니다(잡지와 신문처럼):

예제

div {
  text-align: justify;
}

직접 시도해 보세요

텍스트 방향

direction 과 unicode-bidi 요소의 텍스트 방향을 변경할 수 있는 속성입니다:

예제

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

직접 시도해 보세요

가로 정렬

vertical-align 요소의 가로 정렬 방식을 설정하는 속성입니다.

이 예제는 텍스트 중 이미지의 가로 정렬 방식을 설정하는 방법을 보여줍니다:

예제

img.top {
  vertical-align: top;
}
img.middle {
  vertical-align: middle;
}
img.bottom {
  vertical-align: bottom;
}

직접 시도해 보세요