메뉴 로그인 검색

웹퍼블리셔 온.오프라인 교육센타

마크업기초교육입니다

HTML5강좌

HTML기초.중급.개념.용어강의

바로가기

CSS3강좌

CSS기초.중급.고급.개념.용어강의입니다

바로가기

jQuery강좌

jQuery기초.중급.개념.용어강의입니다

바로가기

개인교습.세미나신청


수평중앙정렬

블럭태그     margin:0 auto;   --> 대상(블럭태그) 자체가 중앙배치됨 (필히 블럭태그의 너비지정해야)

인라인태그 text-align:center;  --> 대상안에 있는 인라인태그(텍스트나이미지)가 대상의 중앙에 배치가 됨

 

div#wrap{

width:1000px;

 margin: 0 auto;

 }

 

h1{

text-align:center

}

 

2 ------------------------------------------------

display:table과 margin:0 auto를 이용하여 수평중앙정렬하기

/* display:table를 사용하면 블럭태그의 너비가 내용물만큼 자동줄어든다*/

--> ie8이하에서는 table명령이 안먹힌다..(위의 것을 사용해야 함)

 

 <style type="text/css">
 *{
  margin:0;
  padding:0;
  }
 ul.menu{
  list-style:none;
  border-top:2px solid gray;
  height:100px;
  outline:1px solid green;
  margin:0 auto;
  display:table;
  }
 ul.menu li{
  float:left;
  text-align:center;
  border:1px solid red;
  width:200px;
  }
 </style>


 <ul class="menu">
     <li>회사소개</li>
     <li>제품소개</li>
     <li>고객센타</li>
     <li>주문상담</li>
     <li>고객센타</li>
     <li>주문상담</li>
</ul>


 

3--------------------------------------------------------------------------------------------------

ul의 너비를 줄이지 않고 li들을 중앙정렬하려면

li{inline-block;}   ul{text-align:center;}

일단 확인하시고...

 

 <style type="text/css">
 *{
  margin:0;
  padding:0;
  }
 ul.menu{
  list-style:none;
  border-top:2px solid gray;
  height:100px;
  outline:1px solid green;
  text-align;center;
  }
 ul.menu li{
  display;inline-block;
  text-align:center;
  border:1px solid red;
  width:200px;
  }
 </style>


 <ul class="menu">
     <li>회사소개</li>
     <li>제품소개</li>
     <li>고객센타</li>
     <li>주문상담</li>
     <li>고객센타</li>
     <li>주문상담</li>
</ul>


4-----------------------------------------------------------------------------------------------------

그런데 위의 것은 ie8이하에서는 작동되지 않는다

처리방법은 li{display:inline; zoom:1;} ul{text-align:center;}

 

<style type="text/css">
 *{
  margin:0;
  padding:0;
  }
 ul.menu{
  list-style:none;
  border-top:2px solid gray;
  height:100px;
  outline:1px solid green;
  text-align;center;
  }
 ul.menu li{
  display;inline;

  zoom;1;
  text-align:center;
  border:1px solid red;
  width:200px;
  }
 </style>


 <ul class="menu">
     <li>회사소개</li>
     <li>제품소개</li>
     <li>고객센타</li>
     <li>주문상담</li>
     <li>고객센타</li>
     <li>주문상담</li>
</ul>

 

***  li를 display:inline이나 display:inline-block로 처리시 li사이의 간격이 발생함

         없애려면

       ul에 font-size:0으로 지정하면 된다. ***

 

TOTAL COMMENTS : 0

이 게시물은 댓글을 달 수 없습니다.

LOGIN

SEARCH

MENU NAVIGATION