CSS에서 이미지를 수평으로 정렬하고 중앙에 정렬하는 방법

질문: CSS에서 이미지의 수평 중앙 정렬을 달성하는 방법은 무엇입니까? 방법: margin: auto; 속성을 사용하여 왼쪽과 오른쪽 여백을 동일하게 설정하여 수평 중심을 맞춥니다. 이미지 너비를 설정하고 이미지 크기를 지정합니다. 이미지 표시 속성을 block 요소로 설정하여 이미지를 가로 중앙에 배치합니다.

CSS

방법:

margin: auto; 속성을 ​​사용하세요. 이 속성은 요소의 수평 및 수직 여백을 자동으로 설정하여 수평 및 중앙 정렬로 정렬합니다. margin: auto; 属性。此属性将自动为元素设置水平和垂直边距，从而对其进行水平居中对齐。

详细说明：

1. 选择图片元素：使用 CSS 选择器选择要水平居中的图片元素。例如：img
2. 应用 margin: auto; 属性：将 margin: auto; 属性应用于所选图片元素。这将自动设置元素的左右边距为相等的值，从而实现水平居中。
3. 设置图片宽度：为了使图片水平居中，需要为图片设置明确的宽度。可以使用 width 属性设置宽度。
4. 设置图片显示方式：将图片的 display 属性设置为 block 元素，以便它能够水平居中。否则，图片将以内联元素显示，无法水平居中。

示例代码：

<code class="css">img {
  width: 200px;
  display: block;
  margin: auto;
}</code>

其他方法：

• 使用 text-align: center; 属性：此属性通常用于文本对齐，但也可以用于水平居中图片。将 text-align 属性应用于图片元素的父元素并为图片设置 display: inline-block;。
• 使用 float: left 和 float: right 属性：此方法不适用于需要精确居中的情况，但可以将图片大致居中。将 float: left; 应用于图片元素，并将 float: right;

자세한 지침: 🎜🎜

1. 🎜이미지 요소 선택: 🎜CSS 선택기를 사용하여 가로 중앙에 배치할 이미지 요소를 선택하세요. 예: img🎜
2. 🎜margin: auto; 속성 적용: 🎜선택한 이미지 요소에 margin: auto; 속성을 ​​적용합니다. 그러면 요소의 왼쪽 및 오른쪽 여백이 자동으로 동일한 값으로 설정되어 수평으로 중앙에 배치됩니다. 🎜
3. 🎜이미지 너비 설정: 🎜이미지를 가로 중앙에 맞추려면 이미지의 너비를 명시적으로 설정해야 합니다. 너비는 width 속성을 ​​사용하여 설정할 수 있습니다. 🎜
4. 🎜이미지 표시 모드 설정: 🎜이미지의 display 속성을 ​​block 요소로 설정하여 수평 중앙에 배치할 수 있습니다. 그렇지 않으면 이미지가 인라인 요소로 표시되고 수평으로 중앙에 배치될 수 없습니다. 🎜

🎜🎜샘플 코드: 🎜🎜rrreee🎜🎜기타 방법: 🎜🎜

• 🎜 text-align: center; 사용 속성: 🎜이 속성은 일반적으로 다음 용도로 사용됩니다. 텍스트 정렬이지만 이미지를 수평으로 중앙에 배치하는 데에도 사용할 수 있습니다. 이미지 요소의 상위 요소에 text-align 속성을 ​​적용하고 이미지에 대해 display: inline-block;을 설정합니다. 🎜
• 🎜 float: left 및 float: right 속성을 ​​사용하세요. 🎜이 방법은 정확한 중심 맞춤이 필요한 상황에는 적합하지 않지만 대략적으로 중심을 맞출 수 있습니다. 영상. 이미지 요소에 float: left;를 적용하고 이미지 요소의 후속 요소에 float: right;를 적용합니다. 🎜🎜

위 내용은 CSS에서 이미지를 수평으로 정렬하고 중앙에 정렬하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!