방법을 알고 싶습니까? DIV의 이미지 중앙에 배치? DIV에서 이미지를 중앙에 놓는 것은 웹 페이지의 모양과 구성을 개선하고 표시하려는 이미지를 강조 표시하는 데 유용할 수 있습니다. DIV의 중앙에 이미지 배치 어렵지 않다, 그러나 이미지 유형, DIV 크기, DIV 스타일 등과 같은 여러 요소에 따라 달라집니다.
이 기사에서 우리는 HTML과 CSS를 사용하여 DIV의 이미지를 중앙에 배치하는 방법, 웹 페이지를 만들고 디자인하는 데 사용되는 프로그래밍 언어입니다. 귀하에게 가장 적합한 방법을 선택할 수 있도록 여러 가지 방법과 예를 보여 드리겠습니다.
DIV 란 무엇입니까?
div는 다음 작업에 사용되는 HTML 요소입니다. 웹페이지에 섹션이나 컨테이너 만들기. 여기에는 텍스트, 이미지, 링크 등과 같은 다른 요소가 포함될 수 있습니다. 또한 이것은 블록 요소입니다. 즉, 페이지의 전체 너비를 차지하고 높이와 너비를 정의할 수 있습니다.. div는 일반적인 요소입니다. 즉, 특정 의미론적 의미가 없습니다. 이러한 이유로 일반적으로 div에 이름이나 카테고리를 지정하기 위해 class 또는 id 속성과 함께 사용됩니다. 와도 자주 사용됩니다. 스타일 속성 또는 CSS 스타일 시트 사용, div에 모양이나 디자인을 제공합니다.
div는 웹페이지의 콘텐츠를 구성 및 구조화하고 스타일 속성을 적용하는 데 사용됩니다. div를 사용하면 다른 요소를 포함하고 정렬, 중앙 정렬, 색상 지정, 음영 처리 등이 가능한 상자를 만들 수 있습니다. 형식은 다음에도 사용할 수 있습니다. 열이나 행 만들기, 질서 있고 유연한 방식으로 콘텐츠를 배포합니다. 일반적으로 애니메이션, 전환, 변형 등과 같은 시각적 또는 대화형 효과를 만드는 데에도 사용할 수 있습니다.
이미지를 수평으로 중앙에 배치하는 방법
DIV에서 이미지를 가로 중앙에 배치 이미지를 중앙에 정렬한다는 의미입니다. DIV의 너비. 여러 가지 방법이 있지만 가장 일반적인 방법은 다음과 같습니다.
- text-align: center 속성을 사용하세요.. 이 속성은 DIV 요소에 적용되며 DIV 내의 모든 요소가 가로로 중앙 정렬되도록 합니다. 예를 들어:
- margin: auto 속성을 사용하세요.. 이 속성은 IMG 요소에 적용되며 이미지의 왼쪽과 오른쪽 여백이 동일하여 수평 중앙에 배치됩니다. 작동하려면 이미지의 너비가 정의되어 있어야 하고 블록 유형이거나 디스플레이: 블록 속성이 있어야 합니다. 예를 들어:
- 변환 속성 사용:translateX(). 이 속성은 IMG 요소에 적용되며 이미지가 원래 위치에서 일정 거리만큼 수평으로 이동하도록 합니다. 수평으로 중앙에 맞추려면 너비의 50%를 오른쪽으로 이동해야 합니다. 이것이 작동하려면 이미지의 너비가 정의되어 있어야 하고 블록 유형이거나 디스플레이: 블록 속성이 있어야 합니다. 예를 들어:
이미지를 수직으로 중앙에 배치하는 방법
DIV에서 이미지를 세로 중앙에 배치 DIV 높이 중앙에 이미지를 정렬한다는 의미입니다.. 여러 가지 방법이 있지만 가장 일반적인 방법은 다음과 같습니다.
- Vertical-align: middle 속성을 사용하세요.. 이 속성은 IMG 요소에 적용되며 이미지가 텍스트 기준선을 기준으로 수직으로 가운데 정렬됩니다. 이것이 작동하려면 DIV 요소에 정의된 높이가 있어야 하며 IMG 요소는 인라인 유형이거나 display: inline 속성이 있어야 합니다. 예를 들어:
- margin-top 및 margin-bottom 속성을 사용하세요.. 이러한 속성은 IMG 요소에 적용되어 이미지의 위쪽과 아래쪽에 동일한 여백을 갖게 하여 이미지를 수직으로 중앙에 배치합니다. 이것이 작동하려면 DIV 요소에 정의된 높이가 있어야 하고 IMG 요소에 정의된 높이가 있어야 하며 블록 유형이거나 속성 표시: 블록이 있어야 합니다. 예를 들어:
- 변환 속성 사용:translateY(). 이번에는 IMG 요소에 적용되어 이미지가 원래 위치에서 특정 거리만큼 수직으로 이동하게 됩니다. 수직으로 중앙에 맞추려면 높이의 50%를 아래쪽으로 이동해야 합니다. 이것이 작동하려면 DIV 요소에 정의된 높이가 있어야 하고 IMG 요소에 정의된 높이가 있고 블록 유형이거나 속성이 표시: 블록이어야 합니다. 예를 들어:
두 축의 중심에 이미지를 배치하는 방법
DIV의 두 축에 이미지를 중앙에 배치하는 것은 이미지를 너비와 높이의 중앙에 정렬 DIV 중에서 이것이 가장 복잡합니다. 여러 가지 방법이 있지만 가장 일반적인 방법은 다음과 같습니다.
- text-align: center 속성과 Vertical-align: middle 속성을 사용하세요.. 이러한 속성은 각각 DIV 요소와 IMG 요소에 적용되며 이미지가 가로 및 세로 모두 가운데 정렬되도록 합니다. 이것이 작동하려면 DIV 요소에 정의된 높이가 있어야 하며 IMG 요소는 인라인 유형이거나 display: inline 속성이 있어야 합니다. 예를 들어:
- margin: auto 속성을 사용하세요.. 여기에서는 IMG 요소에 적용되어 이미지의 XNUMX개 측면 모두에서 동일한 여백을 갖도록 만들어 두 축의 중심에 놓습니다. 이것이 작동하려면 DIV 요소에 정의된 높이가 있어야 하고 IMG 요소에 정의된 너비와 높이가 있어야 하며 블록 유형이거나 display: block 속성이 있어야 합니다. 예를 들어:
- 변환 사용: 번역() 속성. 이 경우 IMG 요소에 적용되어 이미지가 두 축의 원래 위치에서 특정 거리만큼 이동하게 됩니다. 중앙에 맞추려면 너비의 50%를 오른쪽으로, 높이의 50%를 아래로 이동해야 합니다. 이것이 작동하려면 DIV 요소에 정의된 높이가 있어야 하고 IMG 요소에 정의된 너비와 높이가 있어야 하며 블록 유형이거나 display: block 속성이 있어야 합니다. 예를 들어:
모든 이미지를 중앙에 배치
DIV에서 이미지를 중앙에 배치하는 것이 유용할 수 있습니다. 웹사이트의 모양과 구성을 개선하기 위해을 클릭하고 표시하려는 이미지를 강조 표시합니다. DIV에서 이미지를 중앙에 배치하는 것은 어렵지 않지만 이미지 유형, DIV 크기, DIV 스타일 등과 같은 여러 요소에 따라 달라집니다.
이 기사에서 HTML과 CSS를 사용하여 DIV의 이미지를 중앙에 배치하는 방법을 설명했습니다., 웹 페이지를 만들고 디자인하는 데 사용되는 프로그래밍 언어입니다. 우리는 당신이 선택할 수 있도록 몇 가지 방법과 예를 보여주었습니다. 당신에게 가장 잘 맞는 것.
이 기사가 마음에 들었기를 바라며 DIV에서 이미지를 중앙에 배치하는 방법을 배웠기를 바랍니다. 질문이나 제안 사항이 있으면 의견을 남겨주세요. 또한 이 기사를 좋아하는 친구나 가족과 공유할 수도 있습니다. HTML 또는 CSS. 작업을 시작하고 프로그래밍을 해보자!