오늘은 Susuwatari . 일반적으로 '검댕'이라고 불리는 이 작은 생물은 많이 돌아다니는 것을 좋아하므로 한 마리 또는 그 이상의 사진을 찍을 수 있도록 중앙에 가만히 있어야 합니다. 해보자!
참고:함께 읽으면서 블로그의 리포지토리를 참조하세요.
HTML에 이미지 추가
이미지를 중앙에 배치해야 하는 경우는 매우 일반적입니다. 그을음 이미지가 있고 이를 기존의 image와 함께 추가한다고 가정해 보겠습니다. 꼬리표:
<img class="soot" src="soot.jpg" alt="soot!">
잊지 마세요:이미지 태그를 작성할 때 이 태그는 자식 노드를 가질 수 없다는 점을 염두에 두시기 바랍니다. 그래서 닫지 않습니다. 닫는 </img>가 있으면 브라우저가 불평하지 않을 수 있지만 , 적용된 CSS가 작동하지 않을 수 있습니다. 따라서 위의 규칙을 따르십시오.
이제 CSS 없이 이미지를 추가하면 페이지에서 이미지가 다음과 같이 표시됩니다.
이는 이미지가 페이지의 기본 흐름에 따라 배치되기 때문입니다. 이 경우에는 제목과 동일하게 왼쪽에 있습니다.
중앙 정렬 방법 1: 여백:0 자동
그을음을 중앙에 배치하는 가장 쉬운 방법은 img에 다음 스타일을 적용하는 것입니다. 선택기:
img.soot {
margin: 0 auto;
display: block;
} 더 많은 그을음을 추가할 경우에 대비하여 더 명확하게 하기 위해 이미지 선택기에 클래스 이름을 추가하고 있습니다. 모두 중앙에 있도록 해야 합니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
이제 페이지를 확인하겠습니다. 이미지가 중앙에 배치되었습니다!
방금 무슨 일이 일어났습니까?
margin속성은 네 개의 매개변수를 받아들일 수 있습니다. 처음 두 개는 위쪽과 아래쪽, 다른 하나는 왼쪽과 오른쪽입니다. 여기서 우리는 기본적으로 왼쪽 및 오른쪽 여백을 결정하도록 브라우저에 지시합니다. 이 경우 브라우저는 동일하게 설정하여 이미지가 중앙에 배치됩니다.- 우리의
display속성은 많은 값을 가질 수 있습니다. 이 경우 기본적으로 img 요소 t
에 알려주는 'block'을 선택합니다. - o 전체 너비와 한 줄을 사용합니다. 따라서 여백을 적용할 때 전체 이미지의 너비에 적용되도록 하여 중앙에 배치됩니다.
중앙 정렬 방법 2: 텍스트 정렬:가운데;
그을음을 부모 요소 내부에 배치하여 그을음을 중앙에 배치할 수도 있습니다. div를 말한 다음 부모에서 텍스트 정렬을 수행한다고 가정해 보겠습니다. 이미지를 정렬하려면 상위 요소(종종 컨테이너 요소라고도 함)에 이미지를 추가해야 합니다.
.container {
text-align: center;
}
div로 요소는 본질적으로 블록 컨테이너이며 전체 너비를 사용하며 이 경우 그 자식 이미지는 그을음 이미지의 중앙에 배치됩니다.
결론
스스와타리 발음 한 입 먹는 것 같습니다(여러 번 말하는 것을 상상해 보세요). 반면 이미지를 중앙에 맞추는 것은 사실 꽤 쉽죠!