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

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

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

CSS에서는 margin 또는 text-align을 설정하여 이미지의 수평 중앙 정렬을 구현할 수 있습니다. 속성. margin或text-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 중국어 웹사이트의 기타 관련 기사를 참조하세요!