display:inline-block을 주면 li사이에 여백이 발생함. 스페이스 한칸 정도의 여백 (여백이 절대 있으면 안된다면 방법2로 해야함)
text-align: center를 준 ul의 영역
1i태그
1i태그
html은
<ul>
<li> li태그 </li><li> li태그 </li>
</ul>
css는
ul{text-align: center;}
ul li{display: inline-block;}
/* li가 inline-block이므로 li 사이에 스페이스 한칸 정도의 여백이 발생함 */
방법2. ul에 display: inline-block 선언하기
li에 꼭 float: left를 줘야하는 경우
li를 감싸고 있는 ul에 text-align: center를 주고, ul을 감싸는 요소에 text-align: center;를 준다.
ul에 display: inline-block을 준 경우 ul은 li를 합친 것 만큼의 넓이를 갖으므로, 다른 요소와의 정렬을 주의해야함.
text-align: center를 준 ul을 감싸는 영역ul태그
1i태그
1i태그
html은
<div class="area">
<ul><li> li태그 </li><li> li태그 </li></ul>
</div>
css는
.area{text-align: center;}
.area ul{display: inline-block;}
/* ul은 li를 합친 것 만큼의 넓이를 갖음 */
.area ul li{float: left;}
방법3. absolute로 가운데 정렬해야 하는 경우
반드시 요소가 absolute를 줘야 하는 경우에만 이 방법을 써야함.
요소의 넓이 값이 고정이어야 함
어떤 요소를 기준으로 정렬할 것인지 반드시 계산하고 해야함.
정렬 기준의 넓이
가운데 정렬할 요소 (absolute를 준 요소)
html은
<div class="area">
<div> 가운데 정렬할 요소 (absolute를 준 요소) </div>
</div>
css는
.area{position: relative;}
.area div{
position: absolute;
top: 0;
left: 50%;
width: 200px;
margin-left: -100px;
}/* 반드시 넓이값이 들어가야하고,
left: 50%를 주고 margin-left: -넓이의 반 (음수값) */