이미지를 수평으로 중앙에 배치하기 위해 CSS에서 어떤 속성을 사용할 수 있습니까?

下次还敢
풀어 주다: 2024-04-25 12:21:12
원래의
1173명이 탐색했습니다.

CSS 여백 또는 텍스트 정렬 속성을 통해 이미지의 수평 중앙 정렬을 구현할 수 있습니다. 1. margin: 0 auto를 사용하여 중앙 정렬을 달성하기 위해 왼쪽 및 오른쪽 여백을 자동으로 계산하도록 설정합니다. 2. 컨테이너 text-align: center; 및 이미지 요소 display: inline-block;을 인라인 블록 요소로 중앙에 설정합니다.

이미지를 수평으로 중앙에 배치하기 위해 CSS에서 어떤 속성을 사용할 수 있습니까?

CSS 속성을 사용하여 이미지의 수평 중앙 정렬

CSS에서는 margin 또는 text-align을 설정하여 이미지의 수평 중앙 정렬을 구현할 수 있습니다. 속성. margintext-align属性来实现图片水平居中。

1. 使用margin属性

<code class="css">img {
  margin: 0 auto;
}</code>
로그인 후 복사

margin属性设置图片元素的上下左右外边距。通过设置margin: 0 auto;,将左右外边距设置为auto,这意味着浏览器会自动根据容器的宽度计算左右外边距,从而实现图片水平居中。

2. 使用text-align属性

<code class="css">.container {
  text-align: center;
}
img {
  display: inline-block;
}</code>
로그인 후 복사

text-align属性设置容器内元素的文本对齐方式。通过设置.container { text-align: center; },将容器的文本对齐方式设置为居中。再将图片元素设置为display: inline-block;

🎜1. 여백 속성🎜🎜rrreee🎜margin 속성을 ​​사용하여 이미지 요소의 위쪽, 아래쪽, 왼쪽 및 오른쪽 여백을 설정합니다. margin: 0 auto;를 설정하면 왼쪽 및 오른쪽 여백이 auto로 설정됩니다. 즉, 브라우저는 너비에 따라 왼쪽 및 오른쪽 여백을 자동으로 계산합니다. 수평 이미지를 얻기 위한 컨테이너입니다. 🎜🎜🎜2. text-align 속성🎜🎜rrreee🎜text-align 속성을 ​​사용하여 컨테이너 내 요소의 텍스트 정렬을 설정하세요. .container { text-align: center }를 설정하여 컨테이너의 텍스트 정렬을 가운데로 설정합니다. 그런 다음 그림 요소를 display: inline-block;으로 설정하여 인라인 블록 요소로 만들고 그림을 가로 중앙에 배치합니다. 🎜

위 내용은 이미지를 수평으로 중앙에 배치하기 위해 CSS에서 어떤 속성을 사용할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
css
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿