div 블록 내에서 텍스트(가로 및 세로)를 가운데에 배치하는 방법은 무엇입니까?

div 내에서 텍스트를 가로 및 세로 중앙에 쉽게 배치할 수 있습니다. 하나씩 살펴보겠습니다.

텍스트 정렬 속성을 사용하여 Div의 텍스트를 가로 중앙에 배치하세요

div의 텍스트를 가로 중앙에 배치하려면 text-align 속성을 사용하세요. text-align 속성은 블록 수준 요소 내의 줄 상자 정렬을 결정합니다. 가능한 값은 다음과 같습니다. -

• left - 각 줄 상자의 왼쪽 가장자리는 블록 수준 요소 콘텐츠 영역의 왼쪽 가장자리와 정렬됩니다.

• right - 각 줄 상자의 오른쪽 가장자리는 블록 수준 요소 콘텐츠 영역의 오른쪽 가장자리와 정렬됩니다.

• center - 각 줄 상자의 중심은 블록 수준 요소의 콘텐츠 영역 중심과 정렬됩니다.

• justify - 각 줄 상자의 가장자리는 블록 수준 요소의 콘텐츠 영역 가장자리와 정렬되어야 합니다.

• String - 열의 셀 내용이 지정된 문자열에 맞춰 정렬됩니다.

예

이제 text-align 속성을 사용하여 div의 텍스트를 가로 중앙에 배치해 보겠습니다. -

justify-content 속성을 사용하여 Div에서 텍스트를 가로 중앙에 배치하세요

예

div의 텍스트를 가로 중앙에 배치하려면 justify-content 속성을 사용하세요. 이제 예를 살펴보겠습니다

패딩 속성을 사용하여 Div에서 텍스트를 세로 중앙에 배치하세요

div의 텍스트를 세로 중앙에 배치하려면 패딩 속성을 사용하세요. padding 속성을 사용하면 요소의 내용과 테두리 사이에 표시되어야 하는 공간의 크기를 지정할 수 있습니다. 다음 CSS 속성을 사용하여 목록을 제어할 수 있습니다. 다음 속성을 사용하여 상자 양쪽의 패딩에 대해 서로 다른 값을 설정할 수도 있습니다. -

• padding-bottom 요소의 하단 패딩을 지정합니다.
• padding-top 요소의 상단 패딩을 지정합니다.
• padding-left 요소의 왼쪽 패딩을 지정합니다.
• padding-right 요소의 오른쪽 패딩을 지정합니다.
• padding은 앞서 언급한 속성의 약칭으로 사용됩니다.

예

이제 패딩 속성을 사용하여 div에서 텍스트를 세로로 가운데 맞추는 예를 살펴보겠습니다. -

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

div의 텍스트를 세로로 가운데에 맞추려면 line-height 속성을 사용하세요. line-height 속성은 텍스트 한 줄을 구성하는 인라인 상자의 높이를 수정합니다.

다음은 가능한 값입니다. -

• Normal - 요소 내의 줄 높이를 "합리적인" 거리로 설정하도록 브라우저에 지시합니다.

• number - 요소에 있는 행의 실제 높이는 이 값에 요소의 글꼴 크기를 곱한 값입니다.

• length - 요소의 행 높이가 지정된 값입니다.

• Percentage - 요소 내의 행 높이는 요소 글꼴 크기의 백분율로 계산됩니다.

예

이제 line-height 속성을 사용하여 div에서 텍스트를 세로로 가운데 맞추는 예를 살펴보겠습니다. -

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