CSS를 사용하여 이미지를 세로 및 가로 중앙에 배치하는 방법

많은 개발자가 이미지 작업을하는 동안 어려움을 겪습니다. 응답 성과 정렬을 처리하는 것은 특히 어렵습니다. 특히 이미지를 페이지 중앙에 배치하는 것이 더 어렵습니다.

따라서이 게시물에서는 서로 다른 CSS 속성을 사용하여 이미지를 세로 및 가로로 가운데에 배치하는 가장 일반적인 방법 중 일부를 보여 드리겠습니다.

이전 게시물에서 CSS 위치 및 표시 속성에 대해 살펴 보았습니다. 이러한 속성에 익숙하지 않은 경우이 기사를 읽기 전에 해당 게시물을 확인하는 것이 좋습니다.

확인하고 싶다면 비디오 버전이 있습니다.

이미지를 가로로 가운데 맞추기

세 가지 다른 CSS 속성을 사용하여 이미지를 가로 중앙에 배치하는 것으로 시작하겠습니다.

텍스트 정렬

이미지를 가로로 가운데에 배치하는 첫 번째 방법은 text-align속성을 사용하는 것 입니다. 그러나이 방법은 이미지가 다음과 같은 블록 수준 컨테이너 내부에있는 경우에만 작동합니다 .

 div { text-align: center; } 

여백 : 자동

이미지를 중앙에 배치하는 또 다른 방법은 margin: auto속성 을 사용하는 것입니다 (왼쪽 여백 및 오른쪽 여백 용).

그러나 margin: auto단독으로 사용 하면 이미지에는 작동하지 않습니다. 을 사용해야하는 경우 margin: auto사용해야하는 추가 속성이 2 개 있습니다.

margin-auto 속성은 인라인 수준 요소에 영향을주지 않습니다. 때문에 태그가 인라인 요소이며, 우리는 먼저 블록 수준 요소로 변환해야합니다

img { margin: auto; display: block; }

둘째, 너비도 정의해야합니다. 따라서 왼쪽 및 오른쪽 여백은 나머지 빈 공간을 차지하고 스스로 자동 정렬 할 수 있습니다. 이는 트릭을 수행합니다 (폭을 100 %로 지정하지 않는 한).

img { width: 60%; margin: auto; display: block; }

디스플레이 : 플렉스

이미지를 가로로 가운데에 배치하는 세 번째 방법은를 사용하는 것 display: flex입니다. text-align컨테이너 의 속성을 사용한 것처럼 display: flex컨테이너에도 사용합니다.

그러나 display: flex단독으로 사용하는 것만으로는 충분하지 않습니다. 컨테이너에는 다음과 같은 추가 속성도 있어야합니다 justify-content.

div { display: flex; justify-content: center; } img { width: 60%; }

justify-content속성은와 함께 작동 display: flex하며 이미지를 가로 중앙에 배치하는 데 사용할 수 있습니다.

마지막으로 이미지의 너비는 컨테이너의 너비보다 작아야합니다. 그렇지 않으면 공간의 100 %를 차지하고 중앙에 놓을 수 없습니다.

중요 :display: flex속성은 이전 버전의 브라우저에서 지원되지 않습니다. 자세한 내용은 여기를 참조하십시오.

이미지를 수직으로 중앙에 놓기

디스플레이 : 플렉스

수직 정렬의 경우 display: flex다시 사용하면 정말 도움이됩니다.

컨테이너의 높이가 800px이지만 이미지의 높이가 500px에 불과한 경우를 생각해보십시오.

div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }

이제이 경우 컨테이너에 한 줄의 코드를 추가 align-items: center하면 트릭이 수행됩니다.

div { display: flex; justify-content: center; align-items: center; height: 800px; }

align-items병용 수직 경우 부동산 캔 위치 소자 display: flex.

위치 : 절대 및 변형 속성

수직 정렬을위한 또 다른 방법은 positiontransform속성을 함께 사용하는 것입니다. 이것은 약간 복잡하므로 단계별로 해보겠습니다.

1 단계 : 절대 위치 정의

첫째, 우리는에서 이미지의 위치 동작을 변경 static하는 방법에 대해 absolute:

div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }

또한 상대적으로 배치 된 컨테이너 내부에 있어야하므로 position: relative컨테이너 div에 추가 합니다.

2 단계 : 위쪽 및 왼쪽 속성 정의

둘째, 이미지의 상단 및 왼쪽 속성을 정의하고이를 50 %로 설정합니다. 이렇게하면 이미지의 시작점 (왼쪽 상단)이 컨테이너 중앙으로 이동합니다.

img { width: 80%; position: absolute; top: 50%; left: 50%; }

3 단계 : 변환 속성 정의

그러나 두 번째 단계에서는 이미지를 컨테이너 외부로 부분적으로 이동했습니다. 그래서 우리는 그것을 안으로 다시 가져와야합니다.

transform속성을 정의 하고 X 및 Y 축에 -50 %를 추가하면 트릭이됩니다.

img { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

수평 및 수직으로 가운데에 배치하는 다른 방법이 있지만 가장 일반적인 방법을 설명했습니다. 이 게시물이 페이지 중앙에 이미지를 정렬하는 방법을 이해하는 데 도움이 되었기를 바랍니다.

웹 개발에 대한 자세한 내용을 알고 싶다면 내 유튜브 채널을 방문하여 자세한 내용을 확인하십시오.

읽어 주셔서 감사합니다!