웹 디자인에서 이미지는 일반적으로 필수적인 부분이며, 이미지가 디자인 사양을 충족하지 않거나 중앙에 위치하지 않으면 전체 웹 사이트의 레이아웃과 미학을 파괴할 수 있습니다. 따라서 이미지를 어떻게 중앙에 배치하는가가 주목할만한 문제가 되었습니다. CSS에는 이미지를 수평 및 수직 중앙에 배치하는 데 사용할 수 있는 다양한 방법이 있습니다. 이번 글에서는 CSS로 이미지를 중앙에 배치하는 방법을 살펴보겠습니다.
1. 가로로 가운데 정렬
margin:auto 사용은 간단하고 일반적으로 사용되는 방법으로 이미지를 가로로 가운데 정렬할 수 있습니다. 이 방법은 여백 속성의 왼쪽 및 오른쪽 값을 자동(margin: 0 auto;)으로 설정합니다. 이는 요소를 컨테이너에서 가로 중앙에 배치할 수 있으며 단일 이미지에 적합합니다.
다음 코드:
<div class="wrapper"> <img src="image.jpg" alt="示例图片"> </div>
.wrapper {
width: 300px;
margin: 0 auto;
}margin:auto를 사용하여 가로 가운데 맞춤을 달성합니다. 여기서는 컨테이너 래퍼의 왼쪽 및 오른쪽 여백을 자동으로 설정합니다.
다음 코드:
img {
display: block;
margin: 0 auto;
}마진을 설정하여 가로 가운데 맞춤을 달성합니다. 이미지를 0 자동으로 설정합니다.
text-align:center를 사용하여 이미지와 기타 인라인 요소를 가로 중앙에 배치할 수 있지만 이 방법은 컨테이너 내부에 배치된 이미지에만 적용된다는 점에 유의하세요.
다음 코드:
<div class="wrapper"> <img src="image.jpg" alt="示例图片"> </div>
.wrapper {
width: 300px;
text-align: center;
}컨테이너 래퍼의 텍스트 정렬을 중앙으로 설정하면 포함된 이미지가 가로 중앙에 배치됩니다.
이 속성을 사용하여 이미지 스타일을 position:absolute 및 left:50%로 설정하여 이미지를 가로 중앙에 배치합니다. 다음으로, 이미지의 왼쪽 여백(margin-left)을 이미지 자체 너비의 절반(너비/2)으로 설정해야 합니다. 이 방법은 이미지를 수평으로 가운데에 두기만 하면 되는 상황에 적합합니다. 이미지의 높이에 대해.
다음 코드:
<div class="wrapper"> <img src="image.jpg" alt="示例图片"> </div>
img {
position: absolute;
left: 50%;
margin-left: -150px;
}이미지의 위치를 절대값, 왼쪽:50%로 설정하여 이미지의 위치를 결정한 다음 이미지의 실제 너비를 기준으로 왼쪽 여백을 음수로 설정합니다. 이미지를 가로 중앙에 배치합니다.
2. 세로 중심 맞추기
이미지의 높이가 요소의 선 높이와 같을 때 이미지를 컨테이너의 세로 중앙에 배치할 수 있습니다. 이 방법은 텍스트가 한 줄만 있는 상황에 적합합니다.
다음 코드:
<div class="wrapper"> <img src="image.jpg" alt="示例图片"> <p>只有单行文本</p> </div>
.wrapper {
height: 200px;
line-height: 200px;
text-align: center;
}컨테이너의 높이와 줄 높이를 동일한 값으로 설정하여 이미지를 세로로 가운데에 배치합니다.
display:flex 및 align-items:center를 사용하여 이미지와 기타 요소를 컨테이너에서 수직으로 중앙에 배치하세요. 이 방법은 컨테이너에 세로로 가운데에 여러 개의 요소(예: 두 장의 그림)가 있는 상황에 적합합니다.
다음 코드:
<div class="wrapper"> <img src="image1.jpg" alt="示例图片1"> <img src="image2.jpg" alt="示例图片2"> </div>
.wrapper {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}컨테이너의 표시 속성을 flex로 설정하고 align-items:center 및 justify-content:center 속성을 사용하면 이미지가 컨테이너의 가로 및 세로 중앙에 배치됩니다.
position:absolute 및 top:50% 속성을 사용하면 이미지를 세로 중앙에 배치할 수 있습니다. 다음으로 margin-top을 이미지 자체 높이의 절반으로 설정합니다.
다음 코드는
<div class="wrapper"> <img src="image.jpg" alt="示例图片"> </div>
.wrapper {
position: relative;
height: 200px;
}
img {
position: absolute;
top: 50%;
margin-top: -50px;
}이미지의 위치를 절대값으로 설정하여 래퍼 컨테이너의 높이를 200px로 설정합니다. 그런 다음 이미지의 상단을 50%로 설정하여 이미지를 세로로 가운데에 배치하고, 여백 상단을 이미지 높이의 절반으로 설정하여 세로로 가운데에 배치합니다.
3. 수평 및 수직 중앙 정렬
이미지를 수평 및 수직 중앙에 배치해야 하는 경우 위 방법의 다른 조합을 사용할 수 있습니다.
이 방법은 가장 일반적으로 사용되는 방법입니다. position:absolute, top:50% 및 left:50% 속성을 사용하면 가로 및 세로를 동시에 달성할 수 있습니다. 센터링 . 이 방법은 이미지를 중앙에 배치해야 할 때 효과적입니다.
다음 코드:
<div class="wrapper"> <img src="image.jpg" alt="示例图片"> </div>
.wrapper {
position: relative;
height: 200px;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}이미지의 위치와 위쪽 및 왼쪽 속성을 50%로 설정하면 가로 및 세로 가운데 맞춤이 이루어집니다. 다음으로, 변환 속성을 사용하여 이미지를 너비와 높이의 절반만큼 왼쪽 상단으로 이동합니다(예: 변환(-50%,-50%)).
display:flex, justify-content 및 align-items 속성을 사용하면 여러 이미지를 동시에 가로 및 세로로 중앙에 배치할 수 있습니다. 이 방법은 여러 이미지가 동일한 행에 있고 동시에 웹 페이지 중앙에 배치되어야 하는 상황에 적합합니다.
다음 코드:
<div class="wrapper"> <img src="image1.jpg" alt="示例图片1"> <img src="image2.jpg" alt="示例图片2"> </div>
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 200px;
}
img {
margin: 5px;
}컨테이너 표시를 flex로 설정하고 justify-content 및 align-items 속성을 사용하면 이미지를 가로와 세로로 동시에 가운데에 맞출 수 있습니다.
결론
이미지 센터링은 웹 디자인에서 자주 사용되는 기술 중 하나입니다. 페이지 중앙에 정렬해야 하는 이미지가 여러 개인 경우 적절한 중앙 정렬 방법을 선택해야 합니다. 수평 센터링은 margin , text-align 및 position 속성을 사용하여 달성할 수 있으며, 수직 센터링은 line-height , 디스플레이 및 위치 속성을 사용하여 달성할 수 있으며, 수평 및 수직 센터링은 이러한 속성의 조합을 사용하여 달성할 수도 있습니다. 따라서 웹 디자인에서 적절한 이미지 센터링 방법을 선택하면 더 나은 사용자 경험과 더 나은 디자인 스타일을 만드는 데 도움이 될 수 있습니다.
위 내용은 CSS를 사용하여 이미지를 중앙에 배치하는 방법 살펴보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
