HTML 상자의 텍스트를 가운데에 맞추는 방법

HTML 상자에서 텍스트를 중앙에 배치하는 방법에는 네 가지가 있습니다. CSS text-align: center 속성을 사용하여 수평으로 중앙에 배치합니다. 수직 센터링에는 padding-block-start 및 padding-block-end 속성을 사용하십시오. 유연한 정렬을 위해 Flexbox display: flex; justify-content: center; Grid-template-columns 사용:repeat(auto-fit, minmax(0, 1fr)

HTML에서 상자의 텍스트를 가운데에 배치하는 방법

HTML에서는 상자의 텍스트를 상자의 가운데에 배치할 수 있습니다. 방법:

CSS 속성 사용

text-align: center: 컨테이너 내에서 텍스트를 가로 중앙에 배치하는 가장 일반적인 방법

<code class="css">.container {
  text-align: center;
}</code>

padding-block-start 및 padding-block-end: 적용 대상 수직으로 가운데 정렬된 텍스트를 동일한 픽셀 값으로 설정하면 블록 컨테이너에서 텍스트가 수직으로 정렬됩니다.

<code class="css">.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block-start: 1rem;
  padding-block-end: 1rem;
}</code>

Flexbox 사용

display: justify-content: center;

<code class="css">.container {
  display: flex;
  justify-content: center;
  align-items: center;
}</code>

Grid 사용

grid-template-columns:peat(auto-fit, minmax(0, 1fr)) -content: align-items: center: 그리드 레이아웃을 생성하는 그리드 방법 이 코드 조각은 가로 및 세로 중앙에 텍스트가 있는 1열 그리드를 생성합니다

<code class="css">.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  justify-content: center;
  align-items: center;
}</code>

.

위 내용은 HTML 상자의 텍스트를 가운데에 맞추는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!