CSS에서 텍스트 정렬 효과를 설정하는 방법은 무엇입니까? 부동산 소개

CSS는 웹 디자인에서 가장 중요한 스타일 시트 언어 중 하나이며 웹 페이지의 글꼴, 크기, 색상, 정렬 및 기타 스타일을 제어할 수 있습니다. 텍스트 정렬은 매우 기본적이고 중요한 스타일입니다.

텍스트 정렬을 사용하면 웹 페이지가 더욱 조화롭고 깔끔하게 보이도록 하여 사용자에게 더 나은 읽기 환경을 제공할 수 있습니다. CSS에서는 다음 속성을 통해 텍스트 정렬을 수행할 수 있습니다.

1. text-align

text-align 속성은 가장 기본적이고 일반적으로 사용되는 텍스트 정렬 속성으로, 텍스트의 가로 정렬을 설정할 수 있습니다. text-align 속성에는 선택할 수 있는 네 가지 값이 있습니다.

• left(기본값): 텍스트가 왼쪽으로 정렬됩니다.
• right: 텍스트가 오른쪽으로 정렬됩니다.
• center: 텍스트가 가운데로 정렬됩니다.
• justify: 텍스트가 양쪽 끝에서 정렬됩니다. 즉, 텍스트가 자동으로 채워집니다. 전체 줄을 채우고 줄 끝의 공백을 자동으로 채웁니다.

예를 들어 div의 텍스트를 중앙 정렬을 사용하면 다음과 같이 CSS 스타일을 작성할 수 있습니다.

div {
  text-align: center;
}

2. vertical-align

vertical-align 속성은 인라인 요소(예: 이미지, 하이퍼링크 등)의 수직 정렬을 설정하는 데 사용됩니다. 상위 요소. 수직 정렬 속성에는 다음을 포함하여 선택할 수 있는 여러 값이 있습니다.

• baseline(기본값): 요소 기준선 정렬
• sub: 요소 아래 첨자 정렬
• super: 요소 위 첨자 정렬
• top: 요소 상단 정렬
• text-top: 요소 텍스트 위쪽 정렬
• middle: 요소 세로 가운데 정렬
• bottom: 요소 아래쪽 정렬
• text-bottom: 요소 텍스트 아래쪽 정렬

예를 들어 이미지를 세로로 가운데 정렬하려는 경우 상위 요소 정렬을 위해 다음과 같이 CSS 스타일을 작성할 수 있습니다.

img {
  vertical-align: middle;
}

3. line-height

line-height 속성은 텍스트의 세로 정렬을 제어할 수 있는 텍스트 줄 높이를 설정하는 데 사용됩니다. line-height 속성에는 선택할 수 있는 두 가지 값이 있습니다.

• Number: 줄 높이가 텍스트 글꼴 크기의 배수임을 나타냅니다.
• Percent: 줄 높이가 텍스트 글꼴 크기의 백분율임을 나타냅니다.

예를 들어 단락을 중앙에 수직으로 정렬하려면 다음과 같이 CSS 스타일을 작성할 수 있습니다.

p {
  line-height: 2;
}

4. text-indent

text-indent 속성은 텍스트 들여쓰기. 단락의 첫 번째 줄을 특정 거리만큼 들여쓰기할 수 있습니다. text-indent를 설정하면 단락의 텍스트를 더 깔끔하고 명확하게 만들 수 있습니다.

예를 들어 단락의 텍스트를 두 글자 들여쓰기하려면 다음과 같이 CSS 스타일을 작성하면 됩니다.

p {
  text-indent: 2em;
}

실제 웹 디자인에서 텍스트 정렬은 매우 중요한 요소입니다. 페이지가 더 조화롭고 아름다워 보입니다. 위의 CSS 속성을 사용하면 가로 정렬, 세로 정렬, 들여쓰기 및 기타 텍스트 스타일을 쉽게 구현할 수 있어 웹 디자인을 더욱 세련되고 완벽하게 만들 수 있습니다.

위 내용은 CSS에서 텍스트 정렬 효과를 설정하는 방법은 무엇입니까? 부동산 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!