CSS 글꼴을 중앙에 배치하는 방법

웹 디자인에서 글꼴의 중심 배치는 페이지의 전반적인 미학에 중요한 역할을 합니다. CSS는 글꼴의 중앙 정렬 효과를 얻기 위한 다양한 방법을 제공합니다. 다음은 일반적으로 사용되는 구현 방법입니다.

1. text-align 속성을 사용하세요

Text-align은 CSS에서 가장 일반적으로 사용되는 속성 중 하나로, 요소의 텍스트 내용을 가로로 가운데 정렬할 수 있습니다. 기본적으로 text-align 속성의 값은 왼쪽입니다. 즉, 요소의 텍스트 내용이 왼쪽으로 정렬됩니다. 텍스트 내용을 중앙 정렬해야 하는 경우 text-align 특성 값을 중앙으로 설정해야 합니다. 예:

<div style="text-align:center;">这是居中对齐的文本</div>

참고: text-align 속성은 텍스트 콘텐츠에만 작동하며 다른 요소(예: 그림)에는 영향을 미치지 않습니다.

2. line-height 속성을 사용하세요.

line-height는 요소의 텍스트 줄 간격을 정의하는 속성입니다. line-height 값을 컨테이너의 높이와 동일하게 설정하여 텍스트가 컨테이너 내에서 세로 중앙에 위치할 수 있도록 할 수 있습니다. 다음 코드에 표시된 대로:

<div style="height:200px;line-height:200px;text-align:center;">这是居中对齐的文本</div>

참고: 중앙 정렬을 달성하기 위해 line-height를 사용하면 텍스트에 한 줄만 있어야 하며 line-height 값을 설정하려면 컨테이너의 높이를 알아야 합니다.

3. 표시 및 텍스트 정렬 속성을 사용하세요

이 방법을 사용하려면 먼저 중앙에 배치할 요소를 블록 요소로 변환한 다음(기본적으로 텍스트는 모두 인라인 요소임) text-align:center를 사용하여 효과를 얻어야 합니다. 중심 정렬의. 다음 코드에 표시된 대로:

<style>
.center{
    display:block;
    text-align:center;
}
</style>
<div class="center">这是居中对齐的文本</div>

참고: 중앙 정렬을 달성하기 위해 display 및 text-align 속성을 사용하려면 대상 요소가 블록 요소여야 합니다.

4. 변환 속성 사용

이 방법을 사용하려면 대상 요소의 스타일에 변환 속성을 추가한 다음,translateY 속성 값을 -50%로 설정해야 합니다. 다음 코드에 표시된 대로:

<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);">这是居中对齐的文本</div>

참고: 중심 정렬을 달성하려면 변환 속성을 사용하고 대상 요소는 절대 위치(위치:절대)로 설정되어야 합니다.

요약:

위 내용은 CSS에서 글꼴 중심 정렬을 달성하기 위해 일반적으로 사용되는 여러 가지 방법입니다. 중앙 정렬 효과를 얻으려면 실제 상황에 따라 적합한 방법을 선택해야 합니다. 동시에, 다양한 요소와 텍스트 상황에 대해 다양한 방법을 선택하면 페이지의 미학을 더욱 향상시킬 수 있습니다.

위 내용은 CSS 글꼴을 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!