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

HTML 센터 설정

WBOY

풀어 주다： 2023-05-21 15:26:37

원래의

13087명이 탐색했습니다.

HTML 센터링 설정

웹 디자인에서는 텍스트, 그림 및 기타 요소를 센터링하는 것이 매우 일반적인 요구 사항입니다. 다음은 몇 가지 HTML 센터링 설정을 소개합니다.

1. 텍스트 중앙 정렬

다음 코드와 같이 text-align 속성을 사용하여 텍스트의 수평 중앙 정렬 효과를 얻을 수 있습니다.

<p style="text-align:center;">这是一段居中的文本。</p>

로그인 후 복사

텍스트를 수직 중앙에 정렬하려면 다음 줄을 사용하세요. -height 속성 및 높이 속성(다음 코드에 표시됨) 표시:

<style>
.container {
  height: 300px;
  line-height: 300px;
  text-align: center;
}
</style>

<div class="container">这是一段居中的文本。</div>

로그인 후 복사

2. 이미지를 중앙에 배치

다음 코드에 표시된 대로 CSS에서 margin 속성을 사용하여 이미지를 수평으로 중앙에 배치하는 효과를 얻을 수 있습니다. :

<style>
.container {
  text-align: center;
}
img {
  margin: 0 auto;
}
</style>

<div class="container">
  <img src="image.jpg" alt="图片">
</div>

로그인 후 복사

이미지를 세로로 중앙에 배치하려면 다음과 같이 position 속성과 top 속성을 사용하면 됩니다. 코드는 다음과 같습니다.

<style>
.container {
  position: relative;
  height: 400px;
}
img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>

<div class="container">
  <img src="image.jpg" alt="图片">
</div>

로그인 후 복사

3. 컨테이너를 중앙에 배치합니다.

전체 컨테이너를 중앙에 배치하려면 , 다음 코드와 같이 CSS에서 표시 속성과 여백 속성을 사용할 수 있습니다.

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}
</style>

<div class="container">
  <p>这是一个居中的容器。</p>
</div>

로그인 후 복사

위는 일반적으로 사용되는 몇 가지 HTML 센터링 방법입니다. 필요에 따라 유연하게 사용할 수 있습니다.

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