Div에서 이미지를 가로로 중앙에 배치하는 방법은 무엇입니까?
개발자는 여백 속성, Flexbox 모듈, 그리드 보기 레이아웃 및 위치 특성을 활용하여 div의 이미지를 가로로 중앙에 배치할 수 있습니다. 아래 가이드에 따라 div 태그에서 이미지를 가로로 중앙 정렬합니다.
이미지가 HTML 파일에 이런 식으로 배치된 div가 있다고 가정해 보겠습니다.
< 사업부 수업 = '뿌리' >
< 이미지 소스 = '../책.jpg' 키 = '오십%' 너비 = '오십%' 수업 = '영상' >
< / 사업부 >
이미지는 너비와 높이가 50%이고 '이미지' 클래스가 됩니다.
여백 속성 사용
사용자는 여백 속성을 사용하여 HTML 요소 주위에 공간을 추가할 수 있습니다. 윈도우 화면 크기 조정 후 사용 가능한 공간에 따라 여백을 지정합니다. 예를 들어 margin-left 및 right를 auto로 설정하고 display 속성을 block으로 설정합니다.
이미지 {
디스플레이: 블록;
여백-왼쪽: 자동;
여백 오른쪽: 자동;
}
위의 예제를 실행한 후 웹 페이지는 다음과 같습니다.
위의 출력은 이미지가 이제 중앙에 있음을 표시했습니다.
Flexbox 모듈 사용
“ 플렉스박스 ”는 완전한 속성 집합을 포함하는 모듈입니다. 이 경우 루트 요소 클래스를 선택하고 display 속성 값으로 flex를 사용합니다. '에 대한 값으로 센터를 설정합니다. 정당화-내용 ' 그리고 ' 정렬 항목 ' 속성:
.뿌리 {디스플레이: 플렉스;
신이 옳다고 하다- 콘텐츠 : 센터;
정렬 항목: 중앙;
배경- 색상 : 파란색;
}
코드를 실행한 후 웹페이지는 다음과 같습니다.
위의 출력은 배경색이 '파란색'으로 설정된 div의 중앙에 이미지가 표시됨을 보여줍니다.
그리드 보기 레이아웃 모듈 사용
그리드 보기 레이아웃에는 12개의 열이 있고 총 너비는 100%로 설정되며 웹 페이지의 특정 위치에 각 요소를 배치합니다.
.뿌리 {디스플레이: 그리드;
장소 항목: 센터;
}
위의 코드 스니펫에서 'grid' 값은 display 속성에 할당됩니다. 'place-item'은 'justify-content' 및 'align-items' 속성의 줄임말로 사용됩니다.
출력은 그리드 방법을 사용하여 이미지가 div의 중앙에 있음을 인증합니다.
위치 속성 사용
루트 클래스의 위치를 상대값으로 설정하고 이미지 클래스를 절대값으로 설정합니다. 이미지는 div의 중앙에 표시될 수 있습니다.
.뿌리 {위치: 상대적;
}
.영상 {
너비 : 700px;
키 : 500px;
위치: 절대;
왼쪽: 오십 %;
변환: translateX ( - 오십 % ) ;
}
이미지는 '50%'의 왼쪽으로 이동한 다음 X축에서 다시 '-50%'로 변환됩니다. div 중앙에 이미지를 가로로 표시합니다.
이것이 이미지가 div에서 수평으로 중앙에 정렬되는 방식입니다.
결론
div 요소에서 이미지를 가로로 설정하려면 ' 여유 ”, “ 플렉스 모듈 ”, “ 그리드 레이아웃 ' 그리고 ' 위치 ' 속성. “ 여유 ” 왼쪽과 오른쪽의 속성이 자동으로 설정됩니다. '플렉스 모듈'과 '그리드 레이아웃'은 디스플레이를 각각 플렉스와 그리드로 설정하고 ' 장소 항목 ' 이미지를 중앙에 배치하는 속성. position 속성은 루트 클래스에 대한 상대 값과 이미지 클래스에 대한 절대 값을 설정하고 'left' 및 'transform' 속성을 사용합니다. 이 블로그는 div의 이미지를 가로로 중앙에 배치하는 방법을 성공적으로 시연했습니다.