CSS에서 img 센터를 설정하는 방법-CSS 튜토리얼-php.cn

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

下次还敢

풀어 주다： 2024-04-25 14:30:25

원래의

695명이 탐색했습니다.

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

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!