> 웹 프론트엔드 > CSS 튜토리얼 > CSS 텍스트 정렬 속성에는 여러 가지 값이 있습니다.

CSS 텍스트 정렬 속성에는 여러 가지 값이 있습니다.

(*-*)浩
풀어 주다: 2020-09-17 10:17:22
원래의
14718명이 탐색했습니다.

CSS 텍스트 정렬 속성에는 다음과 같은 5가지 값이 있습니다. 1. "왼쪽"은 텍스트를 왼쪽으로 정렬하는 것을 의미합니다. 2. "오른쪽"은 텍스트를 왼쪽으로 정렬하는 것을 의미합니다. 3. "center"는 텍스트를 가운데로 정렬하는 것을 의미합니다. 4. "justify"는 텍스트를 양쪽 끝으로 정렬하는 것을 의미합니다. 5. "inherit"는 상위 요소에서 값을 상속하는 것을 의미합니다.

CSS 텍스트 정렬 속성에는 여러 가지 값이 있습니다.

text-align (text-align) 속성은 텍스트의 가로 정렬을 지정합니다. 요소.

이 속성은 줄 상자가 정렬되는 지점을 지정하여 블록 수준 요소 내에서 텍스트의 가로 정렬을 설정합니다. 사용자 에이전트가 줄 내용의 문자와 단어 사이의 간격을 조정할 수 있도록 허용함으로써 값 정렬이 지원됩니다. 다른 사용자 에이전트는 다른 결과를 얻을 수 있습니다.

텍스트를 왼쪽으로 정렬하세요. 기본값: 브라우저에 의해 결정됩니다. right 텍스트를 오른쪽으로 정렬합니다. center텍스트를 가운데로 정렬합니다. justify 양쪽 끝에서 텍스트를 정렬하는 효과를 얻으세요. inherittext-align 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다. .
description
왼쪽 #🎜 🎜 #









valuejustify

마지막 가로 정렬 속성은 justify입니다. 그 자체로 일련의 문제가 발생합니다.

값 justify는 텍스트의 양쪽 끝을 정렬합니다. 양쪽 맞춤 텍스트에서는 텍스트 줄의 왼쪽과 오른쪽 끝이 상위 요소의 내부 테두리에 배치됩니다. 그런 다음 줄의 길이가 정확히 같도록 단어와 문자 사이의 간격을 조정합니다. 인쇄 분야에서는 양쪽 맞춤 텍스트가 일반적이라는 사실을 눈치채셨을 것입니다. 그러나 CSS에서는 좀 더 고려가 필요합니다.

양쪽 맞춤 텍스트를 늘려 부모 요소의 왼쪽 테두리와 오른쪽 테두리 사이의 공간을 채우는 방법을 결정하는 것은 CSS가 아닌 사용자 에이전트에 달려 있습니다. 예를 들어 일부 브라우저는 단어 사이에만 추가 공백을 추가할 수 있는 반면 다른 브라우저는 문자 사이에 추가 공백을 균등하게 분배할 수 있습니다(CSS 사양에는 문자 간격 속성이 길이 값으로 지정된 경우 "사용자가 에이전트에서 문자 사이의 간격을 더 늘리거나 줄입니다.") 특정 줄의 공간을 줄여 텍스트를 더 빽빽하게 만드는 일부 사용자 에이전트도 있습니다. 이러한 모든 관행은 사용자 에이전트의 정렬 선택에 의해 영향을 받는 텍스트 줄 수에 따라 요소의 모양에 영향을 미치고 높이를 변경할 수도 있습니다.

CSS는 하이픈 처리 방법도 지정하지 않습니다(참고 1). 대부분의 양쪽 맞춤 텍스트는 하이픈을 사용하여 긴 단어를 두 줄로 구분함으로써 단어 사이의 간격을 줄이고 텍스트 줄의 모양을 개선합니다. 그러나 CSS는 하이픈 동작을 정의하지 않으므로 사용자 에이전트가 자동으로 하이픈을 사용할 가능성은 없습니다. 결과적으로 CSS의 양쪽 맞춤 텍스트는 인쇄 시 보기에 좋지 않습니다. 특히 요소가 너무 좁아서 한 줄에 몇 단어만 들어갈 수 없기 때문입니다. 물론 좁은 디자인 요소를 활용하는 것은 괜찮지만 그에 따른 단점도 있으니 주의하세요.

참고 1: 언어마다 하이픈 규칙이 다르기 때문에 CSS에는 하이픈 처리 방법에 대한 지침이 없습니다. 이러한 잠재적으로 불완전한 규칙을 조정하려고 시도하는 대신 사양에서는 문제를 무시합니다.​

위 내용은 CSS 텍스트 정렬 속성에는 여러 가지 값이 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
css
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿