[css] 컨텐츠 가운데 정렬하기

안녕하세요. 플입니다.

오늘은 브라우저 사이즈에 관계없이 컨텐츠를 가운데 정렬해보겠습니다.

 

---

 1.  가로 사이즈 지정 

ul{ width:1280px; }

우선 가로 사이즈를 지정해줍니다.

가로 사이즈는 사이트의 기본 사이즈를 정해둔 것이 있을 겁니다. 그 사이즈로 지정해주세요.

저는 1280px을 주었습니다.

 

최근에는 와이드 모니터가 늘어서 가로사이즈가 점점 늘어나고 있는 추세입니다.

만드는 웹사이트의 성격에 따라 사이즈가 달라지니 여러 상황을 고려해 사이즈를 정해줍니다.

 

저는 알아보기 쉽게 border를 넣었습니다.

보기 편하게 border를 지정한 상태로 진행하고 마지막에 제거해주셔도 됩니다.

 

---

 2.  마진 이용 

ul{ margin:0 auto; }

마지막으로 마진을 이용해 가운데 정렬을 해줍니다.

 

마진 값의 형식은 위와 아래, 왼쪽과 오른쪽 값이 동일하다면 한 번만 적어도 상관없습니다.

여기서 위, 아래 값은 0 / 왼쪽, 오른쪽 값은 auto입니다.

 

값을 auto로 주면 자동으로 양쪽 값이 동일하게 들어가면서 컨텐츠가 가운데 정렬이 됩니다.

사실은 양쪽으로 마진 값을 준 상태죠.

 

auto이기 때문에 브라우저를 줄여도 항상 가운데에 있을 수 있습니다.

다만 지금은 가로사이즈를 px로 값을 주었기 때문에

설정한 가로사이즈보다 작은 창으로 보면 가운데 정렬이 아니게 됩니다.

 

 

---

그럼 이만.

총총.