CSS에서 이미지 중앙에 맞추기

1. display 및 margin 속성을 사용하여 CSS에서 이미지 중앙에 배치
2. text-align 속성을 사용하여 CSS에서 이미지 중앙에 배치
3. flexbox CSS 속성을 사용하여 이미지 중앙에 배치

이 기사에서는 CSS를 사용하여 HTML에서 이미지를 중앙에 배치하는 세 가지 방법을 소개합니다.

display 및 margin 속성을 사용하여 CSS에서 이미지 중앙에 배치

display 및 margin CSS 속성을 함께 사용하여 이미지를 중앙에 배치할 수 있습니다. 이미지의 display 속성은 처음에 inline입니다. 따라서 한 줄에 여러 이미지를 추가할 수 있습니다. 예를 들어, 다음 코드를 작성하면 두 개의 이미지를 연속으로 볼 수 있습니다.

<img src="apple.jpg" alt="apple"/>
<img src="banana.jpg" alt="banana" /> 

따라서 한 줄에 하나의 이미지만 배치되도록 이미지의 display 속성을 block으로 변경해야 합니다. 그런 다음 0px auto의 margin 이미지를 중앙에 배치할 수 있습니다. 이미지는 상단과 하단에서 0px 여백을 갖습니다. 첫 번째 값은 임의의 숫자일 수 있지만 두 번째 값은 auto여야 합니다. auto는 이미지를 중앙에 바로 배치하는 margin을 제공합니다. 이 프로세스는 행에서 하나의 이미지만 중앙에 배치해야 하는 경우에만 작동합니다.

예를 들어, HTML 문서를 만들고 img 태그를 사용하여 이미지를 배치합니다. src 값을 정확하게 작성하고 alt를 작성하여 어떤 이유로 이미지가 표시되지 않을 때 이미지가 의미가 있도록 합니다. src 속성에서 자리 표시자 이미지 https://loremflickr.com/320/240을 사용하십시오. CSS에서 display 속성을 block으로 설정하고 0px auto의 margin을 지정합니다. margin의 첫 번째 값은 요구 사항에 따라 임의의 숫자로 설정됩니다.

아래 예는 display 값을 block으로 설정하고 0px auto의 margin을 부여할 때 이미지가 중앙에 있음을 보여줍니다.

예제 코드:

<img src="/img/DelftStack/logo.png" alt="Logo" />

img{
 display: block;
 margin: 0px auto;
}

text-align 속성을 사용하여 CSS에서 이미지 중앙에 배치

text-align CSS 속성을 사용하여 이미지를 중앙에 배치할 수 있습니다. div 안에 이미지를 래핑하고 text-align 속성을 center로 설정하면 이미지가 중앙에 배치됩니다. 이 방법은 하나의 이미지만 가운데에 맞추는 이전 방법과 달리 한 줄에 여러 이미지를 가운데에 맞출 수 있습니다. 단일 이미지와 다중 이미지 모두에 이 방법을 사용할 수 있습니다.

예를 들어 div를 만들고 parent 클래스를 지정합니다. 그런 다음 div 내부에서 img 태그를 사용하여 이미지를 업로드합니다. src를 https://loremflickr.com/320/240으로 설정하고 alt를 cat으로 설정합니다. CSS에서 .parent라는 클래스 이름을 사용하여 div를 선택하고 text-align 속성을 center로 설정합니다.

아래 예는 div의 text-align CSS 속성을 center로 설정했을 때 div 내부의 이미지가 중앙에 있음을 보여줍니다.

예제 코드:

<div class="parent">
 <img src="/img/DelftStack/logo.png" alt="Logo" />
</div>

.parent{
 text-align : center;
}

flexbox CSS 속성을 사용하여 이미지 중앙에 배치

Flexbox는 가장 널리 사용되는 CSS 기술 중 하나입니다. flexbox의 기본 아이디어는 컨테이너에 항목을 변경할 수 있는 기능을 제공하는 것입니다. display 속성을 flex로 설정하여 컨테이너 내부의 flexbox 속성을 사용할 수 있습니다. 그런 다음 justify-content: center 속성을 사용하여 컨테이너 내부의 항목이나 이미지를 수평으로 중앙에 배치할 수 있습니다. align-items 속성을 center로 설정하여 항목을 세로로 가운데에 둘 수 있습니다.

예를 들어 div를 만들고 클래스 이름을 container로 지정합니다. 그런 다음 src 및 alt와 함께 img 태그를 사용하여 div 안에 이미지를 배치합니다. .container라는 클래스 이름을 사용하여 div를 선택하고 display 속성을 flex로 설정합니다. 그런 다음 justify-content flexbox 속성을 center로 설정합니다.

아래 예는 flexbox 속성을 사용하여 div 내부의 image가 중앙에 있음을 보여줍니다.

<div class="container">
 <img src="/img/DelftStack/logo.png" alt="Logo" />
</div>

.container{
 display: flex;
 justify-content: center;
}