HTML 설정 센터 표시-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

HTML 설정 센터 표시

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 21, 2023 pm 05:07 PM

HTML은 웹 디자인에서 가장 일반적으로 사용되는 마크업 언어 중 하나이며, 중앙 표시도 웹 디자인에서 가장 기본적인 표시 방법 중 하나입니다. 이 기사에서는 HTML을 사용하여 웹 페이지에서 중앙 표시를 설정하는 방법을 소개합니다.

1. 가로 가운데 맞춤

1.1 텍스트 정렬 속성 사용

텍스트 정렬 속성을 사용하면 HTML 요소를 가로로 가운데에 맞출 수 있습니다. 이 특성을 상위 요소에 설정하여 하위 요소를 가로 중앙에 배치할 수 있습니다.

샘플 코드:

<!doctype html>
<html>
  <head>
    <style>
      .container {
        text-align: center;
      }
    </style>
  <head>
  <body>
    <div class="container">
      <p>这是一段文字</p>
    </div>
  </body>
</html>

로그인 후 복사

1.2 여백 속성 사용하기

여백 속성을 사용하여 수평 중앙 정렬을 구현할 수도 있습니다. 이 방법은 너비가 고정된 요소에만 작동합니다.

샘플 코드:

<!doctype html>
<html>
  <head>
    <style>
      .container {
        width: 500px;
        margin: 0 auto;
      }
    </style>
  <head>
  <body>
    <div class="container">
      <p>这是一段文字</p>
    </div>
  </body>
</html>

로그인 후 복사

2. 세로 가운데 맞춤

2.1 텍스트 정렬 속성 사용

HTML 요소에서 세로 가운데 맞춤을 구현해야 하는 경우 상위 요소에 display: table 속성을 설정하고 디스플레이를 설정할 수 있습니다. 하위 요소의 table-cell 및 수직 정렬: 중간 속성.

샘플 코드:

<!doctype html>
<html>
  <head>
    <style>
      .container {
        display: table;
        height: 500px;
        width: 100%;
        background-color: gray;
      }
      .inner {
        display: table-cell;
        vertical-align: middle;
      }
    </style>
  <head>
  <body>
    <div class="container">
      <div class="inner">
        <p>这是一段文字</p>
      </div>
    </div>
  </body>
</html>

로그인 후 복사

2.2 flex 속성 사용

수직 중앙 정렬을 달성하는 또 다른 방법은 flex 속성을 사용하는 것입니다. 상위 요소에 display: flex를 설정하고 하위 요소에 align-items: center 및 justify-content: center 속성을 설정하여 수직 중심 맞춤을 달성합니다.

샘플 코드:

<!doctype html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 500px;
        width: 100%;
        background-color: gray;
      }
    </style>
  <head>
  <body>
    <div class="container">
      <p>这是一段文字</p>
    </div>
  </body>
</html>

로그인 후 복사

두 방법 모두 HTML에서 쉽게 중앙 정렬을 구현할 수 있습니다. 수평 중앙 정렬을 위해 여백 속성을 사용할 때 고정 너비를 지정하고 여백 속성의 왼쪽 및 오른쪽 값을 자동으로 설정하여 중앙 정렬을 구현해야 한다는 점에 유의해야 합니다.

요약:

이 글에서는 text-align 및 margin 속성이 수평 센터링에 적합한 반면, display: table, display: flex 및 Vertical-align 속성은 수직 센터링에 적합한 두 가지 방법을 소개합니다. . 어느 쪽이든 HTML의 중앙 정렬은 쉽습니다.

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.