HTML 센터링 코드 작성 방법

HTML 센터링은 웹 디자인에서 자주 사용되는 레이아웃 방법으로 구현 방법이 비교적 간단합니다. 이 기사에서는 HTML 센터링과 해당 코드 구현을 달성하는 몇 가지 방법을 자세히 소개합니다.

1. 가로 가운데 맞춤

1. 가로 가운데 맞춤을 위해 text-align 속성을 사용하세요.

내부 요소의 가로 가운데 맞춤을 위해 text-align 속성을 상위 요소의 가운데로 설정하세요. 예:

<div style="text-align:center;">
    <p>这里是居中文本</p>
</div>

이렇게 하면 내부 텍스트가 상위 요소의 가로 중앙에 표시됩니다.

2. 수평 중앙 정렬을 위해 margin 속성을 사용하세요.

중앙 정렬이 필요한 요소에 margin 속성을 추가하고, 요소의 수평 중앙 정렬을 위해 왼쪽 및 오른쪽 여백 값을 auto로 설정하세요. 예:

<div style="width:300px;margin:auto;">
    <p>这里是居中文本</p>
</div>

이렇게 하면 div 요소가 가로로 표시되고 상위 요소의 중앙에 표시됩니다.

3. flexbox를 사용하여 수평 중심 맞추기

부모 요소의 표시 속성을 flex로 설정하고 justify-content 속성을 중앙으로 설정하여 내부 요소의 수평 중심 맞추기를 수행합니다. 예:

<div style="display:flex;justify-content:center;">
    <p>这里是居中文本</p>
</div>

이렇게 하면 내부 텍스트가 상위 요소의 가로 중앙에 표시됩니다.

2. 수직 중앙 정렬

1. 수직 중앙 정렬을 구현하려면 수직 정렬 속성을 사용하세요.

수직 중앙 정렬이 필요한 요소에서는 table-cell에 표시 속성을 추가하고 중간에 수직 정렬 속성을 추가합니다. 요소의 수직 중심. 예:

<div style="display:table-cell;vertical-align:middle;">
    <p>这里是居中文本</p>
</div>

이런 방식으로 div 요소는 상위 요소 내에서 세로 중앙에 배치됩니다.

2. Flexbox를 사용하여 수직 중심 맞추기

내부 요소의 수직 중심을 달성하려면 상위 요소에서 표시 속성을 flex로, align-items 속성을 가운데로, 높이 속성을 100%로 설정하세요. 예:

<div style="display:flex;align-items:center;height:100%;">
    <p>这里是居中文本</p>
</div>

이런 방식으로 내부 텍스트는 상위 요소 내에서 세로 중앙에 배치됩니다.

3. 수평 및 수직 중앙 정렬

1. text-align 및 수직 정렬 속성을 사용하여 수평 및 수직 중앙 정렬을 구현합니다.

상위 요소에서 text-align 속성을 center로 설정하고 display 속성을 table-cell로 설정합니다. 필요한 경우 text-align 속성을 center로 설정하고 display 속성을 table-cell로 설정합니다. 중앙 요소에 대해 Vertical-align 속성을 middle로 설정하면 요소가 수평 및 수직으로 동시에 중앙에 배치됩니다. 예:

<div style="display:table-cell;text-align:center;vertical-align:middle;">
    <p>这里是居中文本</p>
</div>

이런 방식으로 div 요소는 상위 요소 내에서 수평 및 수직 중앙에 배치됩니다.

2. Flexbox를 사용하여 수평 및 수직 중심 맞추기

display 속성을 flex로, align-items 속성을 center로, justify-content 속성을 center로, height 속성을 100%로 설정하여 수평을 이루세요. 동시에 내부 요소의 수직 중심을 지정합니다. 예:

<div style="display:flex;align-items:center;justify-content:center;height:100%;">
    <p>这里是居中文本</p>
</div>

위는 HTML의 수평 및 수직 중앙 정렬을 달성하기 위한 몇 가지 특정 방법과 해당 코드 구현입니다. 실제 적용에서는 웹 페이지 레이아웃을 더욱 아름답고 실용적으로 만들기 위해 필요에 따라 적절한 방법을 선택해야 합니다. 동시에 인라인 스타일의 남용을 피하고 스타일 시트를 통합된 방식으로 관리하여 코드 가독성과 유지 관리성을 향상시켜야 합니다.

위 내용은 HTML 센터링 코드 작성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!