적당한 제목이 생각나지 않아서.





부트스트랩에선 그리드 시스템이라고 12개의 컬럼으로 구성된 레이아웃을 제공하고 있어요. 

그리드 시스템에 대해서는 http://bootstrapk.com/css/#grid  (한글)   http://getbootstrap.com/css/#grid  (영어) 

를 참고하면 됩니다. :)







화면이 12개의 컬럼으로 분할되었다고 생각하면 쉽다. 

가운데에 먼가를 나타내본다고 가정하면 


왼쪽(5개 컬럼)  |  내용(2개 컬럼)  |  오른쪽(5개 컬럼) 



+ 소스는 여기에 +


일케하면 되는데. 내용 컬럼이 짝수가 아니라 홀수인 경우에는 가운데 정렬을 어떻게 해야할까??

요게 이번 포스팅의 내용이다. 






결론부터 



+ 소스는 여기에 +


style을 추가함으로써 쉽게 가운데에 정렬하는 것이 가능하다. 
margin: 0 auto; 에서 auto가 왼쪽 오른쪽 margin을 동일하게 가질 수 있도록 해준다. 

따라서 1개의 컬럼 또는 3개, 5개와 같이 홀수 컬럼을 화면 가운데에 정렬할 수 있다. 



style="float: none; margin: 0 auto;" 는 css 파일로 넘기고, div에 클래스 하나를 더 추가해서 사용하는게 더 좋다 :)




+ Recent posts