CSS 텍스트 정렬 속성에 대한 자세한 설명: text-align 및 justify-content

CSS 텍스트 정렬 속성에 대한 자세한 설명: text-align 및 justify-content

웹 디자인에서 텍스트 정렬은 매우 중요한 부분입니다. 좋은 텍스트 정렬은 페이지의 전반적인 아름다움과 가독성을 향상시킬 수 있습니다. CSS에는 일반적으로 사용되는 두 가지 텍스트 정렬 속성, 즉 text-align 및 justify-content가 있습니다.

1. text-align

text-align 속성은 텍스트의 가로 정렬을 설정하는 데 사용됩니다. 블록 수준 요소와 인라인 요소 모두에 적용할 수 있습니다.

사용 가능한 값은 다음과 같습니다.

1. 왼쪽: 왼쪽 정렬, 기본값.
2. 오른쪽: 오른쪽으로 정렬합니다.
3. center: 중앙 정렬.
4. justify: 양쪽 정렬, 행의 텍스트가 행의 전체 너비를 채우기 위해 늘어납니다.

예:

<style>
    p {
        text-align: center;
    }
    h1, h2 {
        text-align: right;
    }
</style>

<h1>这是一个标题</h1>
<h2>这是一个副标题</h2>
<p>这是一段居中对齐的文本。</p>

위 코드에서 h1 및 h2 제목 요소의 텍스트는 오른쪽 정렬되고, p 요소의 텍스트는 가운데 정렬됩니다.

2. justify-content

justify-content 속성은 여러 줄의 텍스트 정렬을 설정하는 데 사용됩니다. 블록 수준 요소에만 적용할 수 있으며 여러 줄의 텍스트가 있는 요소에만 효과적입니다.

사용 가능한 값은 다음과 같습니다.

1. flex-start: 기본값, 시작 정렬.
2. flex-end: 끝 부분에 정렬합니다.
3. center: 중앙 정렬.
4. space-between: 양쪽 끝을 정렬하면 행의 텍스트가 행에 고르게 분포되고 첫 번째 행은 위쪽에 정렬되고 마지막 행은 아래쪽에 정렬됩니다.
5. space-around: 균등하게 정렬되어 행의 텍스트가 각 행 위와 아래에 동일한 공간을 두고 행에 고르게 분포됩니다.

예:

<style>
    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .item {
        width: 100px;
    }
</style>

<div class="container">
    <div class="item">项目 1</div>
    <div class="item">项目 2</div>
    <div class="item">项目 3</div>
    <div class="item">项目 4</div>
    <div class="item">项目 5</div>
    <div class="item">项目 6</div>
</div>

위 코드에서 컨테이너 .container는 flex 레이아웃을 사용하고 justify-content 속성을 space-between으로 설정하여 각 .item 요소가 컨테이너의 위와 아래에 고르게 분산되도록 합니다. 마지막 행 공간은 다른 행과 동일합니다.

요약하자면, text-align 속성은 한 줄 텍스트의 가로 정렬을 설정하는 데 사용되고, justify-content 속성은 여러 줄 텍스트의 정렬을 설정하는 데 사용됩니다. 페이지의 텍스트를 더욱 깔끔하게 정리하고 페이지의 가독성과 미적 측면을 향상시킬 수 있습니다. 실제 사용에서는 필요에 따라 적절한 정렬을 선택하고 스타일을 조정하여 최상의 효과를 얻을 수 있습니다.

위 내용은 CSS 텍스트 정렬 속성에 대한 자세한 설명: text-align 및 justify-content의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!