수평중앙정렬
블럭태그 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으로 지정하면 된다. ***
15 | div태그(그룹태그,묶음태그) | 208 |
14 | 마크업 | 57 |
13 | ul,ol태그 | 61 |
12 | 목록태그 li | 47 |
11 | 링크 태그 a | 44 |
10 | 이미지 태그 img | 53 |
9 | 마크업태그 규칙 | 44 |
8 | html문서 기본구조 | 46 |
7 | 마크업태그 분류 : 블럭태그,인라인태그 | 52 |
6 | 컨텐츠(내용)에 스타일 적용단계 | 42 |
5 | display | 44 |
4 | 스타일 지정 구문형식 | 49 |
» | 수평중앙정렬 | 50 |
2 | 마크업태그 - 블럭태그와 인라인태그 | 75 |
1 | html(문서)이란 [1] | 55 |