웹 페이지의 프론트 엔드에서 작업할 때 이미지를 div(컨테이너) 내 중앙에 배치해야 하는 경우가 있습니다.
이것은 때때로 까다로울 수 있습니다. 그리고 특정 조건에 따라 특정 방법이 어느 시점에서 작동하지 않을 수 있으므로 대안을 찾아야 합니다.
div이 기사에서는 CSS 를 사용 하여 이미지를 중앙에 배치하는 방법을 배웁니다 .
DIV에서 CSS를 사용하여 중앙에 배치하는 방법
div가로 및 세로의 두 가지 방법으로 이미지를 중앙에 배치합니다. 이 두 가지 방법을 함께 사용하면 완전히 중앙에 배치된 이미지를 갖게 됩니다.
기본적으로 웹 콘텐츠는 항상 화면의 왼쪽 상단 모서리에서 시작하여 ltr(왼쪽에서 오른쪽으로) 이동합니다. 아랍어와 같은 특정 언어는 rtl(오른쪽에서 왼쪽으로) 제외됩니다.
div수평 으로 이미지를 중앙에 맞추는 방법부터 시작하겠습니다 . 그런 다음 세로로 가운데 정렬하는 방법을 알아보겠습니다. 마지막으로 두 가지를 함께 수행하는 방법을 살펴보겠습니다.
텍스트 정렬을 사용하여 Div의 이미지를 가로로 가운데에 맞추는 방법
div다음 과 같이 이미지를 배치하는 위치 가 있다고 가정합니다 .
<div class="container">
<img src="./fcc-logo.png" alt="FCC Logo" />
</div>이미지가 보이도록 기본 CSS 스타일을 적용합니다.
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
}
.container img {
width: 100px;
}이 text-align방법은 일반적으로 텍스트를 가운데에 맞추는 데 사용하므로 모든 경우에 작동하지는 않습니다. 그러나 와 같은 블록 수준 컨테이너 내에 이미지가 있는 div경우 이 방법이 작동합니다.
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
text-align: center;
}
.container img {
width: 100px;
}이것은 이미지 자체가 아닌 컨테이너에 text-align값과 함께 속성 을 추가하여 작동 합니다.center
Margin-auto를 사용하여 Div의 이미지를 수평으로 가운데에 맞추는 방법
div(컨테이너) 내에서 이미지를 수평으로 중앙에 배치하는 데 사용할 수 있는 또 다른 방법 margin은 값이 인 속성입니다 auto.
그러면 요소가 지정된 width 을 차지하고 나머지 공간은 왼쪽과 오른쪽 여백 사이에 균등하게 분할됩니다.
일반적으로 이 방법을 컨테이너가 아닌 이미지 자체에 적용합니다. 그러나 불행히도 이 속성만으로는 작동하지 않습니다. width또한 먼저 촬영할 이미지 를 지정해야 합니다 . 이렇게 하면 여백이 컨테이너의 나머지 너비를 알 수 있으므로 균등하게 분할할 수 있습니다.
둘째, img인라인 요소이며 margin-auto속성 집합은 인라인 수준 요소에 영향을 주지 않습니다. display즉, 속성이 로 설정된 블록 수준 요소로 먼저 변환해야 합니다 block.
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
}
.container img {
width: 100px;
margin: auto;
display: block;
}Position 및 Transform 속성을 사용하여 Div에서 이미지를 수평으로 가운데에 맞추는 방법
이미지를 수평으로 배치하는 데 사용할 수 있는 또 다른 방법은 position속성 옆에 있는 transform속성입니다.
이 방법은 매우 까다로울 수 있지만 작동합니다. 먼저 컨테이너 position를 로 설정 relative한 다음 이미지를 로 설정해야 합니다 absolute.
left이렇게 하면 이제 이미지의 , top, bottom또는 right속성을 사용하여 원하는 위치로 이미지를 이동할 수 있습니다 .
이 경우 이미지를 가로 중앙으로만 이동하려고 합니다. 즉, 이미지를 left50% 또는 right-50%로 이동합니다.
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
position: relative;
}
.container img {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
}그러나 이미지를 확인할 때 이미지가 여전히 중앙에 완벽하게 배치되지 않았음을 알 수 있습니다. 센터 포지션인 50%대부터 시작했기 때문이다.
이 경우 transform-translateX속성을 사용하여 수평으로 완벽한 중심을 얻도록 조정해야 합니다.
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
position: relative;
}
.container img {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}Display-Flex를 사용하여 Div의 이미지를 수평으로 가운데에 맞추는 방법
CSS flexbox를 사용하면 부동 또는 위치 지정을 사용하지 않고도 유연하고 반응이 빠른 레이아웃 구조를 더 쉽게 디자인할 수 있습니다. 또한 이것을 사용하여 flex를 값으로 하는 display 속성을 사용하여 컨테이너의 수평 중앙에 이미지를 배치할 수 있습니다.
그러나 이것만으로는 작동하지 않습니다. 또한 이미지를 원하는 위치를 정의해야 합니다. 이것은 center, left또는 아마도 right:
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
display: flex;
justify-content: center;
}
.container img {
width: 100px;
height: 100px;
}참고: 이 display: flex속성은 이전 버전의 브라우저에서 지원되지 않습니다. 여기에서 더 많은 것을 읽을 수 있습니다 . 또한 이미지가 축소되지 않도록 이미지의 너비와 높이가 정의되어 있음을 알 수 있습니다.
div이제 이미지를 세로 로 가운데에 맞추는 방법을 알아보겠습니다 . 나중에 우리는 이미지를 div수평 및 수직으로 중앙에 배치하여 완벽한 중앙으로 만드는 방법을 볼 것입니다.
Display-Flex를 사용하여 수직으로 Div에서 이미지를 가운데에 맞추는 방법
display-flex 방법으로 이미지를 수평으로 중앙에 정렬할 수 있었던 것처럼 수직으로도 동일한 작업을 수행할 수 있습니다.
그러나 이번에는 justify-content속성을 사용할 필요가 없습니다. 오히려 다음 align-items속성을 사용합니다.
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
display: flex;
align-items: center;
}
.container img {
width: 100px;
height: 100px;
}height이 방법이 작동하려면 컨테이너 에 높이를 계산하고 중심 위치를 아는 데 사용할 지정된 컨테이너가 있어야 합니다 .
Position 및 Transform 속성을 사용하여 수직으로 Div에서 이미지를 가운데에 맞추는 방법
position이전에 및 속성 을 사용 transform하여 이미지를 수평으로 중앙에 배치한 것과 유사하게 수직으로도 동일하게 수행할 수 있습니다.
하지만 이번에는 left또는 를 사용하지 않습니다 right,. 대신 다음 대신 또는 top함께 bottom사용 합니다 .translateYtranslateX
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
position: relative;
}
.container img {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}div가능한 모든 방법을 사용하여 가로 및 세로 로 이미지를 가운데에 맞추는 방법을 배웠습니다 . 이제 가로와 세로 모두 가운데 정렬하는 방법을 알아보겠습니다.
Display-Flex를 사용하여 Div의 이미지를 가로 및 세로로 가운데에 맞추는 방법
display-flex속성은 이미지를 세로 및 가로로 가운데에 맞추는 방법의 조합입니다 .
justify-contentflex 메서드의 경우 다음으로 설정된 및 align-items속성을 모두 사용하게 됩니다 center.
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
display: flex;
justify-content: center;
align-items: center;
}
.container img {
width: 100px;
height: 100px;
}Position 및 Transform 속성을 사용하여 Div의 이미지를 가로 및 세로로 가운데에 맞추는 방법
이것은 또한 매우 유사합니다. 당신이 해야 할 일은 수직 및 수평 중앙에 둘 수 있는 두 가지 방법을 결합하기만 하면 되기 때문입니다.
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
position: relative;
}
.container img {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}다음 을 사용하여 translateXand 를 결합할 수도 있습니다 .translateYtranslate(x,y)
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
position: relative;
}
.container img {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}마무리
이 기사에서는 div의 이미지를 세로, 가로 또는 둘 다 가운데에 맞추는 방법을 배웠습니다.
positionFlexbox 방법 은 웹 페이지를 왜곡하고 매우 까다롭게 작동하기 때문에 이미지를 중앙으로 이동할 때 종종 Flexbox 방법을 사용합니다 .
여기에서 CSS 위치 방법 에 대해 자세히 알아볼 수 있고 여기 에서 flexbox 방법에 대해 자세히 알아볼 수 있습니다.
즐거운 코딩하세요!