하나 또는 여러 줄의 텍스트를 세로 중앙에 배치하는 CSS 예제

테이블 레이아웃 시대에는 세로 중심에 대해 너무 많이 생각할 필요가 없습니다. 셀에서는 기본값이 세로 가운데에 있습니다. 텍스트 한 줄은 세로 가운데에 있고 세 줄의 텍스트도 세로 가운데에 있습니다. 양식이 변경되도록 CSS 웹 페이지 레이아웃을 수행합니다. 텍스트는 기본적으로 컨테이너 상단에 배치됩니다.

아래와 같이:

이 경우 텍스트를 세로로 가운데에 배치하는 방법은 무엇입니까? 세 가지 상황으로 나누어집니다.

1. 한 줄의 텍스트인 경우 줄 간격을 사용하여 문제를 해결할 수 있습니다.

한 줄의 텍스트를 세로로 가운데에 맞추는 효과를 얻기 위해 줄 간격 정의를 추가합니다.

2. 여러 줄의 텍스트인 경우 상위 컨테이너의 높이가 고정되어 있지 않습니다.

문제를 해결하기 위해 패딩을 사용할 수 있습니다.

컨테이너의 패딩을 동일한 고정값으로 설정하면 콘텐츠가 증가할수록 컨테이너의 높이도 증가합니다.

여러 줄의 텍스트를 세로로 가운데에 맞추려면 이 옵션을 사용하세요.