텍스트 정렬 속성을 사용하여 텍스트 정렬을 어떻게 제어합니까?

텍스트 정렬 속성을 사용하여 텍스트 정렬을 어떻게 제어합니까?

CSS의 text-align 속성은 요소 내에서 텍스트의 정렬을 제어하는 ​​데 사용됩니다. 이 속성은 <div> , <code><p></p> 또는 <h1></h1> ~ <h6></h6> 과 같은 블록 레벨 요소에 적용하여 이러한 요소 내에서 텍스트의 정렬을 변경할 수 있습니다. text-align 속성을 사용하려면 CSS 규칙 내에 지정하여 사용 가능한 값 중 하나로 설정하십시오. 예를 들어, <p></p> 요소 내의 텍스트를 중앙에 있으려면 다음 CSS 규칙을 사용할 수 있습니다.

 <code class="css">p { text-align: center; }</code>

이 규칙은 페이지의 모든 <p></p> 요소의 텍스트를 중심으로합니다. ID 또는 클래스 선택기를 사용하여 text-align 속성을 특정 요소에 적용하거나 위에 표시된 것처럼 요소 선택기를 사용하여 여러 요소에 적용 할 수 있습니다.

텍스트 정상 속성에 사용할 수있는 다른 값은 무엇입니까?

text-align 속성은 요소 내의 텍스트가 정렬되는 방식을 결정하는 몇 가지 값을 수용합니다. 가장 일반적으로 사용되는 값은 다음과 같습니다.

• 왼쪽 : 텍스트를 요소의 왼쪽 가장자리에 정렬합니다. 이것은 왼쪽에서 오른쪽으로 읽는 대부분의 언어의 기본 정렬입니다.
• 오른쪽 : 텍스트를 요소의 오른쪽 가장자리에 정렬합니다.
• 중앙 : 요소 내의 텍스트를 중심으로합니다.
• 정당화 : 텍스트 줄을 뻗어 요소 내의 왼쪽과 오른쪽 가장자리를 모두 정렬합니다. 이것은 때때로 단어들 사이에서 고르지 않은 간격으로 이어질 수 있습니다.

또한 text-align 속성은 다음과 같은 덜 일반적인 값을 수용합니다.

• 시작 : 텍스트를 요소의 시작 가장자리에 정렬합니다. 요소는 왼쪽에서 left 으로 왼쪽과 오른쪽에서 오른쪽에서 right 과 동일합니다.
• 끝 : 텍스트를 요소의 끝 부분에 맞추고, 이는 왼쪽에서 오른쪽으로 right 에 해당하며 오른쪽에서 왼쪽 언어의 경우 left .

텍스트 정렬 속성은 다양한 HTML 요소에서 텍스트 레이아웃에 어떤 영향을 미칩니 까?

text-align 속성은 요소 컨텐츠 상자의 가장자리에 대한 텍스트 줄의 수평 위치를 조정하여 블록 레벨 HTML 요소 내 텍스트 레이아웃에 영향을 미칩니다. 예를 들어:

• text-align: left 으로 <p></p> 요소에 적용되면 텍스트는 단락의 왼쪽 가장자리를 따라 정렬되어 오른쪽이 잠재적으로 고르지 않습니다.
• text-align: right 사용되면 텍스트는 오른쪽 가장자리를 따라 정렬되어 왼쪽이 잠재적으로 고르지 않습니다.
• text-align: center 텍스트를 배치하여 텍스트 블록의 왼쪽과 오른쪽에 동일한 양의 공간이 있도록 텍스트를 배치합니다.
• text-align: justify 설정되면 브라우저는 단어 사이의 간격을 조정하여 요소 내의 각 텍스트 라인이 요소의 전체 너비를 채우도록 늘어나고 마지막 줄을 제외하고는 일반적으로 기본적으로 왼쪽으로 정렬됩니다.

text-align 의 영향은 적용되는 블록 레벨 요소 내의 텍스트 및 인라인 요소로 제한됩니다. 블록 수준 요소 자체 또는 블록 내에서 절대적으로 위치 된 요소의 위치에 영향을 미치지 않습니다.

텍스트-정렬 속성을 사용하여 텍스트를 수평 및 수직 방향으로 정렬 할 수 있습니까?

text-align 속성은 요소 내에서 텍스트의 수평 정렬을 제어하도록 특별히 설계되었습니다. 텍스트의 수직 정렬에 영향을 미치지 않습니다. 수직 정렬의 경우 다른 CSS 속성을 사용해야합니다.

텍스트의 수직 정렬을 달성하려면 단일 라인 텍스트 요소에 대한 line-height 와 같은 속성 또는 Flex 컨테이너를 사용할 때 align-items 및 justify-content 와 같은 Flexbox 속성과 같은 속성을 사용할 수 있습니다. 예를 들어, Flexbox를 사용하여 <div> 의 수직 중심 텍스트를 사용하려면 다음을 사용할 수 있습니다.<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code class=&quot;css&quot;&gt;div { display: flex; align-items: center; justify-content: center; height: 200px; /* Height must be set for vertical alignment to work */ }&lt;/code&gt;</pre><div class="contentsignin">로그인 후 복사</div></div> <p> 결론적으로, <code>text-align 텍스트의 수평 레이아웃을 관리하기 위해 강력하지만 수직 정렬에는 다른 CSS 기술이 필요합니다.