Block 요소의 가운데 정렬

log 2015. 5. 6. 16:30

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>

예제1

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

.lnb {text-align:center; background-color:#ff4081;}
.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;} 　

예제2

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

.gnb {width:980px; margin:0 auto; zoom: 1; background-color:#ff4081;}
.lnb{width:500px; margin:0 auto; zoom: 1;}
.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;}
.lnb:after{display:block;clear:both;content:''}　

예제3

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

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