CSS를 사용하여 이미지를 중앙에 배치하는 방법 살펴보기

웹 디자인에서 이미지는 일반적으로 필수적인 부분이며, 이미지가 디자인 사양을 충족하지 않거나 중앙에 위치하지 않으면 전체 웹 사이트의 레이아웃과 미학을 파괴할 수 있습니다. 따라서 이미지를 어떻게 중앙에 배치하는가가 주목할만한 문제가 되었습니다. CSS에는 이미지를 수평 및 수직 중앙에 배치하는 데 사용할 수 있는 다양한 방법이 있습니다. 이번 글에서는 CSS로 이미지를 중앙에 배치하는 방법을 살펴보겠습니다.

1. 가로로 가운데 정렬

1. margin:auto

margin:auto 사용은 간단하고 일반적으로 사용되는 방법으로 이미지를 가로로 가운데 정렬할 수 있습니다. 이 방법은 여백 속성의 왼쪽 및 오른쪽 값을 자동(margin: 0 auto;)으로 설정합니다. 이는 요소를 컨테이너에서 가로 중앙에 배치할 수 있으며 단일 이미지에 적합합니다.

다음 코드:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  width: 300px;
  margin: 0 auto;
}

margin:auto를 사용하여 가로 가운데 맞춤을 달성합니다. 여기서는 컨테이너 래퍼의 왼쪽 및 오른쪽 여백을 자동으로 설정합니다.

다음 코드:

img {  
  display: block;
  margin: 0 auto;
}

마진을 설정하여 가로 가운데 맞춤을 달성합니다. 이미지를 0 자동으로 설정합니다.

2. text-align:center

text-align:center를 사용하여 이미지와 기타 인라인 요소를 가로 중앙에 배치할 수 있지만 이 방법은 컨테이너 내부에 배치된 이미지에만 적용된다는 점에 유의하세요.

다음 코드:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  width: 300px;
  text-align: center;
}

컨테이너 래퍼의 텍스트 정렬을 중앙으로 설정하면 포함된 이미지가 가로 중앙에 배치됩니다.

3. position:absolute 및 left:50%

이 속성을 사용하여 이미지 스타일을 position:absolute 및 left:50%로 설정하여 이미지를 가로 중앙에 배치합니다. 다음으로, 이미지의 왼쪽 여백(margin-left)을 이미지 자체 너비의 절반(너비/2)으로 설정해야 합니다. 이 방법은 이미지를 수평으로 가운데에 두기만 하면 되는 상황에 적합합니다. 이미지의 높이에 대해.

다음 코드:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

img {
  position: absolute;
  left: 50%;
  margin-left: -150px;
}

이미지의 위치를 ​​절대값, 왼쪽:50%로 설정하여 이미지의 위치를 ​​결정한 다음 이미지의 실제 너비를 기준으로 왼쪽 여백을 음수로 설정합니다. 이미지를 가로 중앙에 배치합니다.

2. 세로 중심 맞추기

1. line-height

이미지의 높이가 요소의 선 높이와 같을 때 이미지를 컨테이너의 세로 중앙에 배치할 수 있습니다. 이 방법은 텍스트가 한 줄만 있는 상황에 적합합니다.

다음 코드:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
  <p>只有单行文本</p>
</div>

.wrapper {
  height: 200px;
  line-height: 200px;
  text-align: center;
}

컨테이너의 높이와 줄 높이를 동일한 값으로 설정하여 이미지를 세로로 가운데에 배치합니다.

2. display:flex 및 align-items:center

display:flex 및 align-items:center를 사용하여 이미지와 기타 요소를 컨테이너에서 수직으로 중앙에 배치하세요. 이 방법은 컨테이너에 세로로 가운데에 여러 개의 요소(예: 두 장의 그림)가 있는 상황에 적합합니다.

다음 코드:

<div class="wrapper">
  <img src="image1.jpg" alt="示例图片1">
  <img src="image2.jpg" alt="示例图片2">
</div>

.wrapper {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

컨테이너의 표시 속성을 flex로 설정하고 align-items:center 및 justify-content:center 속성을 사용하면 이미지가 컨테이너의 가로 및 세로 중앙에 배치됩니다.

3. position:absolute 및 top:50%

position:absolute 및 top:50% 속성을 사용하면 이미지를 세로 중앙에 배치할 수 있습니다. 다음으로 margin-top을 이미지 자체 높이의 절반으로 설정합니다.

다음 코드는

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  position: relative;
  height: 200px;
}
img {
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

이미지의 위치를 ​​절대값으로 설정하여 래퍼 컨테이너의 높이를 200px로 설정합니다. 그런 다음 이미지의 상단을 50%로 설정하여 이미지를 세로로 가운데에 배치하고, 여백 상단을 이미지 높이의 절반으로 설정하여 세로로 가운데에 배치합니다.

3. 수평 및 수직 중앙 정렬

이미지를 수평 및 수직 중앙에 배치해야 하는 경우 위 방법의 다른 조합을 사용할 수 있습니다.

1. position:absolute, top:50% and left:50%

이 방법은 가장 일반적으로 사용되는 방법입니다. position:absolute, top:50% 및 left:50% 속성을 사용하면 가로 및 세로를 동시에 달성할 수 있습니다. 센터링 . 이 방법은 이미지를 중앙에 배치해야 할 때 효과적입니다.

다음 코드:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  position: relative;
  height: 200px;
}
img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

이미지의 위치와 위쪽 및 왼쪽 속성을 50%로 설정하면 가로 및 세로 가운데 맞춤이 이루어집니다. 다음으로, 변환 속성을 사용하여 이미지를 너비와 높이의 절반만큼 왼쪽 상단으로 이동합니다(예: 변환(-50%,-50%)).

2. display:flex 및 justify-content 및 align-items를 사용하세요

display:flex, justify-content 및 align-items 속성을 사용하면 여러 이미지를 동시에 가로 및 세로로 중앙에 배치할 수 있습니다. 이 방법은 여러 이미지가 동일한 행에 있고 동시에 웹 페이지 중앙에 배치되어야 하는 상황에 적합합니다.

다음 코드:

<div class="wrapper">
  <img src="image1.jpg" alt="示例图片1">
  <img src="image2.jpg" alt="示例图片2">
</div>

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 200px;
}
img {
  margin: 5px;
}

컨테이너 표시를 flex로 설정하고 justify-content 및 align-items 속성을 사용하면 이미지를 가로와 세로로 동시에 가운데에 맞출 수 있습니다.

결론

이미지 센터링은 웹 디자인에서 자주 사용되는 기술 중 하나입니다. 페이지 중앙에 정렬해야 하는 이미지가 여러 개인 경우 적절한 중앙 정렬 방법을 선택해야 합니다. 수평 센터링은 margin , text-align 및 position 속성을 사용하여 달성할 수 있으며, 수직 센터링은 line-height , 디스플레이 및 위치 속성을 사용하여 달성할 수 있으며, 수평 및 수직 센터링은 이러한 속성의 조합을 사용하여 달성할 수도 있습니다. 따라서 웹 디자인에서 적절한 이미지 센터링 방법을 선택하면 더 나은 사용자 경험과 더 나은 디자인 스타일을 만드는 데 도움이 될 수 있습니다.

위 내용은 CSS를 사용하여 이미지를 중앙에 배치하는 방법 살펴보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!