CSS에서 텍스트를 세로로 정렬

1. line-height 속성을 사용하여 CSS에서 텍스트를 세로로 정렬
2. CSS에서 텍스트를 세로로 정렬하기 위해 line-height 속성과 함께 div 내부에 span 사용
3. flexbox를 사용하여 CSS에서 텍스트를 세로로 정렬

CSS에서 텍스트를 세로로 정렬하는 세 가지 방법을 소개합니다.

line-height 속성을 사용하여 CSS에서 텍스트를 세로로 정렬

단일 라인 텍스트가 있는 경우 line-height 속성을 사용하여 div 내에서 텍스트를 수직으로 정렬할 수 있습니다. line-height CSS 속성은 라인 상자의 높이를 설정합니다. 텍스트 줄 사이의 거리를 설정하는 데 사용됩니다. 그러나 한 줄 텍스트를 세로로 정렬하는 데 사용할 수도 있습니다. 이 기술은 텍스트에 줄 바꿈이 있거나 두 줄 이상인 경우 작동하지 않습니다. 텍스트를 세로로 정렬하려는 위치에 대한 요구 사항에 따라 line-height에 값을 지정할 수 있습니다.

예를 들어 div를 만들고 그 안에 한 줄 텍스트를 작성합니다. div에 center의 클래스 이름을 지정해 보겠습니다. div 안에 수직 정렬 한 줄짜리 텍스트를 씁니다. div에 100px의 height, 100px의 line-height를 지정하여 텍스트를 div 중앙에 수직으로 정렬합니다. 마지막으로 div에 1px solid black의 border를 지정하여 수직 정렬을 확인합니다.

아래 예제는 CSS line-height 속성을 사용하여 100 px의 height와 1px solid black의 border를 포함하는 div의 중심에 텍스트가 수직으로 정렬되었음을 보여줍니다.

예제 코드:

<div class="center"> Vertically aligned </div>

.center {
    height : 100px;
    line-height : 100px;
    border : 1px solid black;
}

CSS에서 텍스트를 세로로 정렬하기 위해 line-height 속성과 함께 div 내부에 span 사용

line-height 속성을 사용하여 여러 줄을 세로로 정렬할 수도 있습니다. div 태그 안에 span 태그를 배치하고 span 태그 안에 여러 줄을 넣을 수 있습니다. br 태그를 사용하여 줄을 끊고 여러 줄 텍스트로 만들 수 있습니다. 그런 다음 div와 span 모두에 line-height 속성을 사용할 수 있습니다. 또한 span 태그에 display: inline-block CSS 속성을 사용하여 여러 줄의 코드를 함께 래핑합니다. 따라서 span 내부의 line-height CSS 속성을 사용하여 여러 줄 텍스트를 서로 구분해야 합니다.

예를 들어 div를 만든 다음 div 안에 span을 만듭니다. br 태그를 사용하여 span 안에 여러 줄의 텍스트를 씁니다. CSS에서 div를 선택하고 height를 100px로 지정하고 line-height를 100px로 설정합니다. 정렬을 보려면 1px solid black의 div 테두리를 설정하십시오. 여러 줄의 텍스트를 함께 래핑하려면 span 태그의 display 속성을 inline-block으로 설정합니다. 여러 줄의 텍스트 사이에 간격을 주기 위해 줄 높이를 스팬에 20px로 지정합니다. vertical-align을 middle로 유지하여 텍스트를 정확히 중앙에 수직으로 배치합니다.

아래 예는 line-height 및 display: inline-block 속성을 사용하여 div 내 여러 텍스트 줄의 수직 정렬을 보여줍니다.

예제 코드:

<div> 
    <span>
        Multiple <br> line <br> code
    </span>
</div>

div{
    height : 100px;
    line-height: 100px;
    border : 1px solid black
}
span {
    display : inline-block;
    vertical-align : middle;
    line-height : 20px;
}

flexbox를 사용하여 CSS에서 텍스트를 세로로 정렬

flexbox를 사용하여 div 내의 텍스트를 수직 또는 수평으로 정렬할 수도 있습니다. display 속성을 flex로 설정하여 flexbox를 사용할 수 있습니다. display 속성을 flex로 설정한 후 align-items 속성을 사용하고 그 값을 center로 지정하여 div 내에서 텍스트를 세로로 정렬할 수 있습니다. justify-content 속성을 사용하고 center로 설정하여 div 내의 텍스트를 수평으로 가운데에 맞출 수 있습니다. Flexbox는 사용이 매우 간편하고 매우 효과적입니다.

예를 들어 div를 만들고 그 안에 한 줄 또는 여러 줄의 텍스트를 씁니다. br 태그를 사용하여 여러 줄의 텍스트를 만듭니다. div에 100px의 높이를 지정합니다. 경계를 1px solid black로 설정하여 정렬을 확인합니다. flexbox를 사용하려면 display 속성의 값을 flex로 지정합니다. 그런 다음 align-items를 center로 설정하여 div 내의 텍스트를 중앙에 수직으로 정렬합니다. justify-content 값을 center에 배치하여 텍스트를 수평으로 정렬할 수도 있습니다.

따라서 flexbox를 사용하여 CSS에서 텍스트를 수평 및 수직으로 정렬할 수 있습니다.

예제 코드:

<div>
    Align <br> Text to <br> Center
<div>

div {
    height : 100px;
    border : 1px solid black;
    display : flex;
    align-items : center;
    justify-content : center;
}