margin: 0 auto; 는 대표적인 중앙정렬 속성입니다. 그런데 어떻게 동작되길래 중앙정렬이 되는 것일까요?
15-1. margin: 0 auto
여기서 0값은 위 아래 여백을 주지 않는다는 의미입니다. 즉, margin의 값은 좌/우/위/아래 여백을 뜻하고, 여기에 '0'이 놓여졌으므로 좌/우/위/아래 여백을 모두 지정하지 않는다는 뜻이죠!
margin: 100; 처럼 숫자는 단위가 없어서 적용되지 않습니다. %나 px을 정확히 정해줘야 합니다.
15-2. auto
auto는 가로 중앙에 배치한다는 뜻입니다. 그리고 자연스럽게 좌우 여백은 균등하게 배분됩니다.
margin: 100px auto; : 여기에서 100px은 위 아래 여백을 말하며, 좌우 여백은 균등하게 분배되어 element가 정중앙에 배치됩니다.
그렇게 해서 margin: 0 auto;는 위아래 여백 없이 가로 중앙에 배치되는 가장 기본적인 서식이 되는 것입니다!
사진을 보며 비교해봅시다. 루피 등장!
<!DOCTYPE html>
<head>
<style>
img {width: 300px;}
body { background-color: #eeeee4;}
</style>
</head>
<body>
<div>
<img src="https://i.pinimg.com/564x/69/00/d6/6900d6591cf3e9e89158d059c7e5d2bc.jpg">
</div>
</body>
</html>이미지 크기와 구별을 위해 배경색만 입힌 코드입니다.
margin-left: auto; 를 입력하겠습니다.
이 때, display: block;을 추가해줘야 합니다. 이유는 아래에서 설명하겠습니다.
<style>
img {width: 300px; margin-left: auto; display: block;}
body { background-color: #eeeee4;}
</style> margin-right: auto;도 입력하겠습니다.
<style>
img {width: 300px; margin-left: auto; margin-right: auto; display: block;}
body { background-color: #eeeee4;}
</style> 짜잔! 가운데 정렬이 되었습니다.
margin-left: auto; & margin-right: auto; 는 margin: 0 auto; 와 같은 것을 알 수 있죠?
margin: 0 auto; 에서 margin: 100px auto; 는 앞서 말했듯이 위 아래로 100px 여백이 생깁니다. (아래 여백을 확인하기 위해 사진을 하나 더 추가했습니다.)
15-3. margin auto 안되는 이유
제가 display: block;을 작성한 이유는 margin: auto; 가 적용이 되지 않을 때가 몇 있습니다.
15-3-1. <!Doctype> 선언
선언이 제대로 되었는지 확인합니다. 앞에는 어떤 문자도 선행되어서는 안됩니다.15-3-2. width 설정
auto는 자동으로 사이즈를 설정해주는 것입니다. CSS에서는 블록단위로 페이지 일부를 할당 받기 때문에 이미지에 background-color와 크기를 조정해도 해당 좌우에 할당된 빈 공간은 해당 블록이 가집니다. 동일 코드를 두 번 붙여넣고 확인했을 때 첫 번째 이미지 옆 빈 공간에 이미지가 바로 나타나는 것이 아니라 아랫줄에 나타나는 이유입니다.
그러므로 가로폭의 사이즈를 정확하게 인식할 수 있어야 정렬이 가능합니다. 제대로 설정되어 있는지 확인해보고, 되어 있지 않다면 width 태그를 이용해서 가로 사이즈를 지정해주도록 합니다.
overflow: hidden 방법도 있습니다. (알아 볼 것✨)
15-3-3. inline 속성 태그인지 확인
margin: auto;는 inline 속성에서는 적용되지 않습니다. inline 속성은 자기 자신 만큼의 영역값(width, height)을 갖기 때문입니다. 이러한 경우에는 3가지 중 하나를 선택합니다.
inline속성의 태그가 아닌block속성의 태그로 바꾸어 사용합니다span태그 대신에div태그를 사용합니다.- 해당 요소의
display속성을block으로 바꾸어 줍니다.
