div 텍스트를 세로로 가운데에 맞추는 방법은 무엇입니까? div 텍스트를 세로로 가운데 정렬하는 방법 소개

세로 센터링은 프런트 엔드 레이아웃에서 매우 일반적인 센터링 방법입니다. 다음 글에서는 div 텍스트의 세로 센터링 구현 방법을 소개합니다.

우선, 텍스트의 가로 가운데 정렬이 상대적으로 간단하다는 점을 알아야 합니다. 행 수준 요소는 상위 요소의 텍스트 정렬 중심을 설정하고 블록 수준 요소는 자체 왼쪽 및 오른쪽 여백을 자동으로 설정합니다. 하지만 div 텍스트의 수직 센터링은 그렇게 간단하지 않으므로 div 텍스트의 수직 센터링을 구현하는 여러 가지 방법을 자세히 살펴보겠습니다.

1. 수직 정렬 속성을 사용하면 텍스트를 중앙에 정렬할 수 있습니다.

수직 정렬 값에는 Middle, Bottom, Text-Bottom 등이 많이 있습니다. 이 속성은 "가끔 작동하고 때로는 변경됨"을 알 수 있습니다. "Spirit", 어떤 경우에는 이 속성을 추가한 후에도 img 또는 텍스트에 아무런 변화가 표시되지 않습니다. 수직 정렬은 inline-block이나 inline과 table-cell 같은 요소 내에서만 작동하기 때문입니다.

예:

<div style="vertical-align: middle;display: table-cell;">
    <img src="02.jpg" alt="">
    <p>文本居中</p></div>

2. line-height를 사용하여 텍스트를 수직으로 가운데 정렬하세요

세로로 가운데 정렬할 줄이 한 개이거나 단어 몇 개가 있는 경우 가장 간단하게 만드는 방법은 다음과 같습니다. 텍스트 높이 컨테이너와 높이가 같으면 됩니다.

예:

p { height:30px; line-height:30px; width:100px; overflow:hidden; }

3. 패딩을 사용하여 텍스트를 세로로 가운데에 맞추는 것은 줄 높이를 사용하여 텍스트를 세로로 가운데 맞추는 것과 유사합니다. 수직으로 중앙에 위치합니다.

예:

p { padding:20px 0; }

4. CSS3 변환을 사용하여 텍스트를 세로로 가운데에 배치합니다

예:

.center-vertical{
  position: relative;
  top:50%;
  transform:translateY(-50%);
}.center-horizontal{
  position: relative;
  left:50%;
  transform:translateX(-50%); 
}

5 플렉스 레이아웃을 사용하여 텍스트를 세로로 가운데에 배치합니다

이 문서는 여기에 있습니다. 위 코드에 사용된 다양한 속성에 대해 더 알고 싶다면 PHP 중국어 홈페이지의
css User Manual

과

css3 Learning Manual

을 참고하세요! ! !

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