CSS에서 img 센터를 설정하는 방법

CSS에서는 다음을 통해 이미지를 중앙에 배치할 수 있습니다. 텍스트 정렬 속성 사용: 이미지를 블록 요소로 설정하고 자동 왼쪽 및 오른쪽 여백을 설정합니다. Flexbox 레이아웃 사용: 이미지를 Flexbox 컨테이너에 넣고 가로 및 세로 가운데 맞춤 속성을 설정합니다. 그리드 레이아웃 사용: 이미지를 그리드 컨테이너에 배치하고 가로 및 세로 가운데 속성을 모두 설정합니다. 절대 위치 지정 사용: 일반 흐름에서 이미지를 제거하고 변환을 통해 수평으로 중앙에 배치하고 수직으로 중앙에 배치합니다.

CSS에서 이미지를 가운데에 배치하는 방법

CSS에서 이미지를 가운데에 배치하는 방법은 여러 가지가 있습니다.

텍스트 정렬 속성 사용

<code class="css">img {
  display: block;
  margin: 0 auto;
}</code>

• display: block code > 이미지를 블록 요소로 만듭니다. <code>display: block 使图像成为一个块元素。
• margin: 0 auto 自动设置图像的左右外边距，使其在父元素中水平居中。

使用 flexbox 布局

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

img {
  width: 100px;
  height: 100px;
}</code>

• 创建一个 flexbox 容器（.container）。
• justify-content: center 将子元素（图像）在水平方向上居中。
• align-items: center 将子元素在垂直方向上居中。

使用网格布局

<code class="css">.container {
  display: grid;
  place-items: center;
}

img {
  width: 100px;
  height: 100px;
}</code>

• 创建一个网格容器（.container）。
• place-items: center 将子元素（图像）同时在水平和垂直方向上居中。

使用绝对定位

<code class="css">img {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}</code>

• 使用绝对定位将图像从其正常流中移除。
• left: 50% 将图像水平居中，但它将相对于其父元素的左边界居中。
• transform: translate(-50%, -50%)
margin: 0 auto 이미지가 상위 요소 내에서 수평 중앙에 오도록 이미지의 왼쪽 및 오른쪽 여백을 자동으로 설정합니다.

🎜🎜🎜Flexbox 레이아웃🎜🎜rrreee🎜🎜을 사용하여 Flexbox 컨테이너(.container)를 만듭니다. 🎜🎜justify-content: center 하위 요소(이미지)를 가로 중앙에 배치합니다. 🎜🎜align-items: center 하위 요소를 수직으로 중앙에 배치합니다. 🎜🎜🎜🎜그리드 레이아웃🎜🎜rrreee🎜🎜을 사용하여 그리드 컨테이너(.container)를 만듭니다. 🎜🎜place-items: center 하위 요소(이미지)를 가로 및 세로 중앙에 배치합니다. 🎜🎜🎜🎜절대 위치 지정 사용🎜🎜rrreee🎜🎜절대 위치 지정을 사용하여 정상적인 흐름에서 이미지를 제거하세요. 🎜🎜left: 50% 이미지를 수평으로 중앙에 배치하지만 상위 요소의 왼쪽 테두리를 기준으로 중앙에 배치됩니다. 🎜🎜transform:transform(-50%, -50%) 이미지를 자체 너비와 높이의 50%만큼 왼쪽 및 위쪽으로 이동하여 상위 요소 내 중앙에 배치합니다. 🎜🎜

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