Div 내에서 텍스트를 세로로 가운데에 배치하는 방법은 무엇입니까?

Div에서 텍스트를 수직으로 정렬하는 방법

div로 작업할 때 div 내의 텍스트가 정렬되었는지 확인해야 하는 경우가 있습니다. 수직으로 가운데. 이는 다양한 방법을 통해 달성할 수 있습니다.

line-height 사용

div의 높이가 50px와 같이 고정된 경우 line-height를 간단히 사용할 수 있습니다. CSS 속성입니다.

#abc {
  height: 50px;
  line-height: 50px;
}

이렇게 하면 텍스트가 세로 방향으로 중앙에 배치됩니다. div.

표시 속성 사용

여러 줄 텍스트의 경우 범위 요소로 감싸고 표시 속성과 세로 정렬을 적용할 수 있습니다.

#abc {
  display: table;
  width: 100%;
}

#abc span {
  display: table-cell;
  vertical-align: middle;
}

변환 속성 사용

또 다른 방법은 다음과 같습니다. translateY() 함수와 함께 변환 속성을 사용합니다. 이는 디스플레이 속성을 지원하지 않는 구형 브라우저에 특히 유용합니다.

#abc {
  position: relative;
}

#abc p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

위 내용은 Div 내에서 텍스트를 세로로 가운데에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!