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;
margin
속성을 사용하여 이미지 요소의 위쪽, 아래쪽, 왼쪽 및 오른쪽 여백을 설정합니다. margin: 0 auto;
를 설정하면 왼쪽 및 오른쪽 여백이 auto
로 설정됩니다. 즉, 브라우저는 너비에 따라 왼쪽 및 오른쪽 여백을 자동으로 계산합니다. 수평 이미지를 얻기 위한 컨테이너입니다. 🎜🎜🎜2. text-align 속성🎜🎜rrreee🎜text-align
속성을 사용하여 컨테이너 내 요소의 텍스트 정렬을 설정하세요. .container { text-align: center }
를 설정하여 컨테이너의 텍스트 정렬을 가운데로 설정합니다. 그런 다음 그림 요소를 display: inline-block;
으로 설정하여 인라인 블록 요소로 만들고 그림을 가로 중앙에 배치합니다. 🎜위 내용은 이미지를 수평으로 중앙에 배치하기 위해 CSS에서 어떤 속성을 사용할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!