CSS 텍스트 정렬
텍스트 정렬
속성은 텍스트 의 text-align
수평 정렬을 설정하는 데 사용됩니다.
텍스트는 왼쪽 또는 오른쪽 정렬, 중앙 정렬 또는 양쪽 맞춤이 가능합니다.
다음 예제는 가운데 정렬 및 왼쪽 및 오른쪽 정렬된 텍스트를 보여줍니다(텍스트 방향이 왼쪽에서 오른쪽인 경우 왼쪽 정렬이 기본값이고 텍스트 방향이 오른쪽에서 왼쪽인 경우 오른쪽 정렬이 기본값임).
예시
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
속성이 "justify"로 설정 되면 text-align
각 줄은 모든 줄의 너비가 동일하고 왼쪽 및 오른쪽 여백이 직선이 되도록 늘어납니다(잡지 및 신문에서와 같이).
예시
div {
text-align: justify;
}
텍스트 마지막 정렬
text-align-last
속성은 텍스트의 마지막 줄을 정렬하는 방법을 지정합니다 .
예시
세 개의 <p> 요소에서 텍스트의 마지막 줄을 정렬합니다.
p.a
{
text-align-last: right;
}
p.b
{
text-align-last: center;
}
p.c
{
text-align-last: justify;
}
텍스트 방향
direction
및
unicode-bidi
속성을 사용하여 요소의 텍스트 방향을 변경할 수 있습니다 .
예시
p {
direction: rtl;
unicode-bidi: bidi-override;
}
수직 정렬
vertical-align
속성은 요소의 수직 정렬을 설정합니다 .
예시
텍스트에서 이미지의 수직 정렬 설정:
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align:
text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}