Div에서 이미지 가운데 맞추기

웹 페이지의 프론트 엔드에서 작업할 때 이미지를 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%);
}