모바일 모드에서 미디어 쿼리를 사용하여 이미지 중앙에 배치

모바일 모드에서 미디어 쿼리를 사용하여 이미지 중앙에 배치

CSS를 사용하여 웹 페이지에서 이미지를 세로 및 가로 중앙에 배치하려면 다음 CSS 코드를 사용할 수 있습니다.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Adjust this value as needed */
}

.container img {
  max-width: 100%;
  max-height: 100%;
}

이 예제에서는 이미지를 담을 클래스 이름이 "container"인 컨테이너 요소를 만듭니다. 컨테이너는  display: flex정렬을 위해 flexbox 속성을 사용할 수 있는 를 사용하여 플렉스 컨테이너로 스타일이 지정됩니다.

mobile center

이  justify-content: center 속성은 이미지를 컨테이너 내에서 수평으로 중앙에 배치하고  align-items: center 수직으로 이미지를 중앙에 배치합니다. 는  height: 100vh 컨테이너의 높이를 뷰포트 높이의 100%로 설정하지만 필요에 따라 이 값을 조정할 수 있습니다.

img 컨테이너 내부의 선택기는  이미지  max-width: 100% 가  max-height: 100% 컨테이너의 크기를 초과하지 않도록 설정합니다.

이 CSS를 사용하려면 다음과 같은 컨테이너 요소로 이미지를 래핑해야 합니다.

<div 클래스 = "컨테이너" >
   < img  src = "your-image.jpg"  alt = "내 이미지" > 
</ div >

"your-image.jpg" 이미지의 실제 경로 또는 URL로  바꾸고 "Your Image" 접근성을 위해 적절한 대체 텍스트로 바꿉니다  .

이 설정을 사용하면 이미지가 페이지의 수직 및 수평 중앙에 배치됩니다.