CSS에서 이미지를 중앙에 배치하는 코드를 작성하는 방법

CSS에서 다음 코드를 사용하여 이미지를 수평으로 중앙에 배치할 수 있습니다. 컨테이너 요소 text-align: center;를 설정합니다. 이미지를 인라인 블록 수준 요소 표시(inline-block;)로 설정합니다. 이미지를 수직으로 중앙에 배치합니다. 수직 정렬: 중간;. 이미지를 수직으로 중앙에 배치: 컨테이너 요소를 flexbox 표시: flex;로 설정합니다. 하위 요소를 수직으로 가운데 정렬합니다. 항목: 가운데;. 하위 요소를 수평으로 가운데에 배치합니다. justify-content: center;. 이미지 크기 제한 최대 너비: 100%;, 최대 높이:

CSS

에서 이미지를 중앙에 배치하기 위한 코드: CSS 코드를 사용하여 요소에서 이미지를 수평 및 수직으로 중앙에 배치하는 방법은 무엇입니까?

답변:

수평 중심

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

.image {
  display: inline-block;
  vertical-align: middle;
}</code>

수직 중심

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

.image {
  max-width: 100%;
  max-height: 100%;
}</code>

세부 정보:

수평 중심

• text-align: center; code>는 <code>image-container 요소는 가로 중앙에 배치되도록 설정됩니다. text-align: center; 将 image-container 元素设置为水平居中。
• display: inline-block; 将 image 元素设为内联块级元素，允许它与文本对齐。
• vertical-align: middle; 将 image 元素在垂直方向上居中，与 surrounding text 对齐。

垂直居中

• display: flex; 将 image-container 元素设为 flexbox，允许对其子元素进行灵活布局。
• align-items: center; 将 image-container 元素中的所有子元素在垂直方向上居中。
• justify-content: center; 将 image-container 元素中的所有子元素在水平方向上居中。
• max-width: 100%; 和 max-height: 100%; 限制 image 元素的大小，使其适应 image-container
display: inline-block; image 요소를 인라인 블록 수준 요소로 만들어 텍스트와 정렬할 수 있도록 합니다.

🎜vertical-align: middle; image 요소를 수직으로 중앙에 배치하고 주변 텍스트에 맞춰 정렬합니다. 🎜🎜🎜🎜세로 중심🎜🎜🎜🎜display: flex; image-container 요소를 flexbox로 설정하여 해당 하위 요소의 유연한 레이아웃을 허용합니다. 🎜🎜align-items: center; image-container 요소의 모든 하위 요소를 수직으로 중앙에 배치합니다. 🎜🎜justify-content: center; image-container 요소의 모든 하위 요소를 가로 중앙에 배치합니다. 🎜🎜max-width: 100%; 및 max-height: 100%;는 image 요소의 크기를 제한하여 크기에 맞도록 합니다. 가로 세로 비율을 유지하면서 이미지 컨테이너 요소의 크기입니다. 🎜🎜

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