CSS에서 세로로 텍스트 가운데 맞춤

1. line-height 속성을 사용하여 CSS에서 텍스트를 세로로 중앙에 배치
2. display, vertical-align 및 line-height 속성을 사용하여 CSS에서 텍스트를 세로로 중앙에 배치
3. CSS에서 텍스트를 수직으로 가운데에 표시하도록 테이블 표시 시뮬레이션

이 기사에서는 CSS에서 텍스트를 세로로 가운데에 맞추는 방법을 소개합니다.

line-height 속성을 사용하여 CSS에서 텍스트를 세로로 중앙에 배치

line-height 속성의 높이를 div로 설정하여 CSS에서 텍스트를 세로로 가운데에 둘 수 있습니다. line-height 속성은 선의 높이를 지정합니다. div 요소의 테두리를 만들어 설명할 수 있습니다. text-align 속성을 사용하고 center로 설정하여 텍스트를 수평으로 가운데에 정렬할 수도 있습니다.

예를 들어 HTML에서 div를 만들고 Hello World!라는 텍스트를 작성합니다. 사이. 다음으로 CSS에서 div의 높이를 200px로 설정합니다. 또한 line-height를 동일한 값으로 설정합니다. text-align 속성을 사용하여 center에 텍스트를 정렬합니다. border 단축 속성을 사용하여 black 색상으로 3px 너비의 solid 테두리를 만듭니다.

아래 예에서는 div의 line-height와 height의 동일한 픽셀을 설정했습니다. 따라서 텍스트를 세로로 가운데에 맞춥니다. 그러나 이 방법은 한 줄 텍스트에만 적용됩니다.

예제 코드:

<div>
    Hello World!
</div>

div {
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 3px solid black;
}

display, vertical-align 및 line-height 속성을 사용하여 CSS에서 텍스트를 세로로 중앙에 배치

display, vertical-align 및 line-height와 같은 다양한 CSS 속성을 사용하여 텍스트를 여러 줄의 중앙에 배치할 수 있습니다. display 속성은 요소의 표시 동작을 설정합니다. vertical-align 속성은 요소의 수직 정렬을 담당합니다. display를 inline-block으로, vertical-align을 middle로 설정하여 여러 줄의 텍스트를 수직으로 정렬할 수 있습니다.

예를 들어 HTML에서 div를 만들고 그 안에 span을 작성합니다. Hello라는 텍스트를 작성하고 <br>로 줄을 끊은 다음 World!를 작성합니다. 스팬 내부. 다음으로 CSS에서 div를 선택하여 line-height와 height를 200px의 동일한 값으로 지정합니다. div에 테두리를 지정하고 첫 번째 방법에서와 같이 텍스트를 가운데 정렬합니다. 그런 다음 span을 선택하고 display 속성을 inline-block으로 설정합니다. 그런 다음 vertical-align 속성에 middle 값을 지정합니다. 마지막으로 line-height 값을 normal로 설정합니다.

아래 예에서는 여러 줄의 텍스트가 일반적인 line-height를 갖도록 span에서 line-height 속성을 normal로 변경했습니다. inline-block 값은 위 줄 바로 아래에 있는 텍스트의 다음 줄을 시작합니다. vertical-align 속성의 middle 값은 텍스트를 수직 축의 중앙에 배치합니다.

예제 코드:

<div>
    <span>Hello <br> World! </span>
</div>

div {
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 3px solid black;
}
span {
    display:inline-block;
    vertical-align: middle;
    line-height: normal;
}

CSS에서 텍스트를 수직으로 가운데에 표시하도록 테이블 표시 시뮬레이션

텍스트를 표 셀로 시뮬레이션하여 CSS에서 세로로 중앙에 배치할 수 있습니다. display 속성을 사용하여 테이블을 시뮬레이션합니다. 또한 vertical-align 속성을 사용하여 텍스트를 수직으로 중앙에 배치합니다. 두 번째 방법의 HTML 스니펫을 작업하고 여기에 새 CSS를 적용합니다.

먼저 div를 선택하고 높이, 너비, 테두리를 설정합니다. display 속성을 사용하고 값을 table로 설정합니다. div가 테이블처럼 작동하도록 합니다. 그런 다음 span을 선택하고 display 속성을 table-cell로, vertical-align 속성을 middle로 설정합니다. span 요소를 table-cell로 설정하면 요소가 테이블 셀처럼 만들어집니다. 이런 식으로 세로 가운데 텍스트를 만들 수 있습니다.

예제 코드:

<div>
    <span>Hello <br> World!</span>
</div>

div {
    display: table;
    height: 200px;
    width: 100%;
    text-align: center;
    border: 3px solid black;
}
span {
    display: table-cell;
    vertical-align: middle;
}