Block 요소의 가운데 정렬

:: HTML :: 

　 <div class="Gnb"> <ul class="lnb"> <li><a href="#">블로그1</a></li> <li><a href="#">블로그2</a></li> <li><a href="#">블로그3</a></li> <li><a href="#">블로그4</a></li> <li><a href="#">블로그5</a></li> <li><a href="#">블로그6</a></li> </ul> </div> 　

:: EX_1 [display:inline-block] ::

• inline-block 으로 마크업 할 경우 키보드 [Enter]키의 개행처리 부분을 텍스트로 인식한다.
• 개행으로 인한 우측의 3~4px 정도의 여백이 발생되어 크로스브라우징에 문제가 발생한다.
• IE하위버전에서는 블록요소의 inline-block요소가 적용 되지 않는다.

　 .Gnb .lnb{text-align:center; background-color:#ff4081;} .Gnb .lnb li{display:inline-block;} .lnb li a{display:block;padding:10px 15px; font-size:12px; color:#fff; border-right:1px solid #fff; text-align:center;} 　

:: EX_2 [float] ::

• 리스트를 추가 할 경우 ul태그의 width값을 변경 해 주어야 한다. 

　 .Gnb{width:980px; margin:0 auto; zoom: 1; background-color:#ff4081;} .Gnb .lnb{width:500px; margin:0 auto; zoom: 1;} .Gnb .lnb li{float:left;} .lnb li a{display:block;padding:10px 15px;font-size:12px;color:#fff;border-right:1px solid #fff; text-align:center;} .Gnb .lnb:after{display:block;clear:both;content:''} 　  

:: EX_3 [display:inline-block]/[float] ::

• 리스트 요소 추가 및 width값 변경 시에도 유동적 대응 가능하다.
• 개행제거, 크로스브라우징 효율적이다.
• float 해체 코드 before,after 불필요 하다.

　 .Gnb{ font-size:0; text-align:center; /*ul가운데 정렬*/ background-color:#ff4081; } .Gnb .lnb{ display:inline-block; /*width값 가변 유동적*/ *display:inline; /*IE7 대응*/ zoom: 1; /*IE7 대응*/ } .Gnb .lnb li{float:left;}/*개행 제거*/ .Gnb .lnb li a{display:block;padding:10px; 15px; font-size:11px; color:#fff; border-right:1px solid #fff; text-align:center;}