HTML 글꼴 센터링을 설정하는 방법-프런트엔드 Q&A-php.cn

HTML 글꼴 센터링을 설정하는 방법

WBOY

풀어 주다： 2023-05-05 20:19:07

원래의

5459명이 탐색했습니다.

HTML 글꼴 중앙 정렬 설정 방법

HTML에서는 아름다움과 읽기 편한 느낌을 위해 페이지의 텍스트를 중앙 정렬해야 하는 경우가 많습니다. 이 기사에서는 CSS를 사용하여 HTML 텍스트를 중앙에 배치하는 방법을 보여줍니다.

1단계: 가운데 맞춤이 필요한 요소 선택

먼저 가운데 맞춤이 필요한 요소를 선택해야 합니다. HTML 텍스트 센터링은 단일 태그 내 텍스트 센터링과 전체 태그 내 텍스트 센터링의 두 가지 범주로 나눌 수 있습니다. 페이지.

단일 라벨 내에서 텍스트 중앙에 배치:

특정 라벨 내에서 텍스트만 중앙에 배치해야 하는 경우 CSS 속성 text-align:center를 사용하여 설정할 수 있습니다. 예:

<p style="text-align:center;">这是中间对齐的文字</p>

로그인 후 복사

전체 페이지의 텍스트를 중앙에 배치:

전체 페이지의 텍스트를 중앙에 배치해야 하는 경우 본문 요소에 대해 설정해야 합니다. 예:

<style>
    body {
        text-align: center;
    }
</style>
<body>
    <h1>这是标题</h1>
    <p>这是一段正文文字</p>
    <ul>
        <li>这是列表项目1</li>
        <li>这是列表项目2</li>
    </ul>
</body>

로그인 후 복사

2단계: 센터링 방법 선택

센터링해야 할 요소를 선택한 후 적절한 센터링 방법을 선택해야 합니다. 일반적인 센터링 방법에는 수평 센터링과 수직 센터링이 있습니다.

가로 가운데 맞춤:

CSS에서는 여백 속성을 사용하여 가로 가운데 맞춤을 수행할 수 있습니다. 구체적인 구현 방법은 다음과 같이 요소의 왼쪽 및 오른쪽 여백을 자동으로 설정하는 것입니다.

<style>
    .content {
        margin: 0 auto;
        text-align: center;
    }
</style>
<div class="content">
    <h1>这是标题</h1>
    <p>这是一段正文文字</p>
</div>

로그인 후 복사

여기서 .content 요소는 div 요소이며 왼쪽 및 오른쪽 여백 속성을 자동으로 설정하면 가로 가운데 맞춤을 구현할 수 있습니다.

세로 센터링:

CSS에서 세로 센터링은 더 복잡하며 Flexbox 및 table-cell과 같은 속성을 사용해야 합니다. 다음은 Flexbox를 사용하여 세로 및 가로 센터링을 동시에 달성하는 방법에 대한 소개입니다. 구체적인 구현 방법은 다음과 같이 상위 요소를 플렉스 컨테이너로 설정하고, 하위 요소를 플렉스 항목으로 설정하고, 가운데 정렬을 위해 align-items 및 justify-content 속성을 사용하는 것입니다.

<style>
    .container {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
    }
    .content {
        text-align: center;
    }
</style>
<div class="container">
    <div class="content">
        <h1>这是标题</h1>
        <p>这是一段正文文字</p>
    </div>
</div>

로그인 후 복사

여기서 .container는 다음과 같습니다. display: flex 속성을 사용하는 상위 요소는 하위 요소 .content를 flex 항목으로 설정하고 align-items 및 justify-content 속성을 사용하여 동시에 수직 및 수평 중앙 정렬을 달성합니다.

요약:

CSS를 사용하면 HTML 텍스트를 중앙에 정렬해야 하는 요소와 적절한 중앙 정렬 방법을 선택해야 합니다. 수평 센터링은 일반적으로 여백 속성을 사용하는 반면, 수직 센터링은 Flexbox 및 table-cell과 같은 속성을 사용해야 합니다.

위 내용은 HTML 글꼴 센터링을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!