CSS 기초(7) 인라인요소 가운데정렬

인라인 요소는 자기 자신에게 margin: auto가 안 먹는다.

-> 부모 요소에 text-align: center

​

.parent {

text-align: center;

}

​

<div class="parent">

<span>인라인요소</span>

</div>

​

span, a, input 같은 인라인 요소는 전부 이 방식으로 가운데 정렬

​

a 태그(링크) 가운데 정렬

​

<div class="box">

<a href="#">가운데 링크</a>

</div>

​

.box {

text-align: center;

}

​

img(이미지) 가운데 정렬

<div class="img-box">

<img src="img.jpg">

</div>

​

.img-box {

text-align: center;

}

​

​

​

인라인 요소에 margin: auto 안 되는 이유 (시험에 잘 나옴)

​

span {

margin: 0 auto; /* ❌ 효과 없음 */

}

​

• 인라인 요소는 width 개념이 없기 때문
• margin auto는 블록 요소 + width가 있어야만 작동

​

구분	span	img
기본 display	inline	inline-block처럼 동작
width/height	❌ 적용 안 됨	✅ 적용됨
margin 위아래	❌ 거의 안 됨	✅ 적용됨
줄바꿈	❌ 없음	❌ 없음
크기 조절	❌ 불가	✅ 가능

​