이 문서에서는 가변 상자 내에서 텍스트를 세로로 정렬하는 방법을 보여줍니다.
방법 1: 'align-item' 속성 사용
텍스트를 세로로 정렬하려면 ' 정렬 항목 ” 속성은 CSS에서 제공합니다. 요소가 flexbox 내부에서 정렬을 설정하는 데 도움이 됩니다. 가능한 수직 정렬 위치는 ' 맨 위 ', 가운데 ', 또는 ' 맨 아래 ' 옆.
이러한 방향으로 요소를 정렬하는 실제 데모는 다음과 같습니다.
예 1: 최상위 게재순위
flexbox 내부의 텍스트를 상단 위치에 맞추려면 ' 플렉스 스타트 ' 값은 '에 제공됩니다. 정렬 항목 ' 재산. 이 속성은 flex로 표시될 기본 div에 할당됩니다. 클래스가 '인 div가 있다고 가정해 보겠습니다. 수직의 ”가 HTML 파일에 생성됩니다. 그런 다음 CSS 파일에서 해당 클래스를 선택하고 다음 속성을 할당합니다.
.수직의 {
색상 : 하얀색 ;
키 : 150픽셀 ;
표시하다 : 몸을 풀다 ;
패딩 왼쪽 : 20픽셀 ;
정렬 항목 : 플렉스 스타트 ;
배경색 : 포레스트그린 ;
}
- 먼저 CSS의 color, background-color, height 속성을 사용하여 div에 기본 스타일 지정 및 정렬을 지정합니다.
- 'display' 속성도 flexbox로 만들기 위해 'flex'로 설정됩니다.
- 마지막으로 flexbox의 시작 부분에 텍스트를 표시하려면 'align-items' 속성을 'flex-start'로 설정합니다.
위의 코드를 실행하면 웹 페이지는 다음과 같습니다.
이제 텍스트가 flexbox 내부의 맨 위 위치에 정렬되었다고 출력에 표시됩니다.
예 2: 중간 위치
텍스트를 중간 위치에 세로로 정렬하려면 ' 센터 ” CSS에 대한 값 “ 정렬 항목 ' 재산:
.수직의 {색상 : 하얀색 ;
키 : 150픽셀 ;
표시하다 : 몸을 풀다 ;
패딩 왼쪽 : 20픽셀 ;
정렬 항목 : 센터 ;
배경색 : 포레스트그린 ;
}
위의 코드 실행 후:
위의 출력은 이제 텍스트가 flexbox의 중앙에 정렬되었음을 표시합니다.
예 3: 최하위 포지션
가변상자 하단에 텍스트를 설정하려면 ' 플렉스 엔드 ” 값을 “ 정렬 항목 ' 재산. 이번에는 flexbox가 끝나는 위치에 텍스트가 정렬됩니다.
.수직의 {색상 : 하얀색 ;
키 : 150픽셀 ;
표시하다 : 몸을 풀다 ;
패딩 왼쪽 : 20픽셀 ;
정렬 항목 : 플렉스 엔드 ;
배경색 : 포레스트그린 ;
}
위의 코드를 실행하면 웹 페이지는 다음과 같습니다.
위의 출력은 이제 텍스트가 아래쪽 위치에 수직으로 정렬되었음을 표시합니다.
방법 2: 'justify-content' 속성 사용
“ 정당화-내용 ” 속성을 활용하여 flexbox 내부의 텍스트를 세로로 정렬할 수도 있습니다. 그러나 '와 동일하게 작동합니다. 텍스트 정렬 ” 속성을 사용하여 요소를 행 방향으로 정렬합니다. 따라서 정렬 방향을 변경하려면 ' 플렉스 방향 ” 속성은 “ 정당화-내용 '를 향한 정렬 열 ' 방향:
.수직의 {키 : 150픽셀 ;
표시하다 : 몸을 풀다 ;
패딩 왼쪽 : 20픽셀 ;
색상 : 하얀색 ;
배경색 : 다크시안 ;
플렉스 방향 : 열 ;
정당화-내용 : 플렉스 엔드 ;
}
위 코드에 대한 설명은 다음과 같습니다.
- “ 키 ”, “ 색상 ' 그리고 ' 패딩 왼쪽 ” 속성은 위의 방법과 동일하게 작동합니다.
- 그 후 ' 열 ” 값을 “ 플렉스 방향 열을 통해 스타일을 적용하려면 flexbox의 ”를 선택합니다.
- 그 후, “ 정당화-내용 ” 속성은 텍스트를 세로로 정렬합니다.
- 결국 “ 플렉스 엔드 ' 값은 요소를 ' 맨 아래 ' 옆.
메모 : 사용자는 ' 플렉스 스타트 ' 그리고 ' 센터 ' 값을 ' 맨 위 ', 그리고 ' 가운데 ”각각.
예를 들어, 위의 코드를 실행한 후 웹 페이지는 다음과 같습니다.
위의 출력은 텍스트가 flexbox의 아래쪽에 정렬되었음을 표시합니다.
결론
flexbox 내부의 텍스트를 세로로 정렬하려면 ' 정렬 항목 ' 그리고 ' 정당화-내용 ” CSS 속성을 활용할 수 있습니다. 이 두 속성 모두 ' 플렉스 스타트 ”, “ 센터 ' 또는 ' 플렉스 엔드 ” 값을 사용하여 텍스트를 ' 맨 위 ”, “ 가운데 ' 그리고 ' 맨 아래 ” flexbox 내부의 방향. 이 기사에서는 가변 상자에서 텍스트의 수직 정렬을 보여주었습니다.