210331 가운데 정렬된 ul에서 li 가운데 정렬

 

HTML

<ul class="menuCategory">
	<li class='a'></li>
	<li class='a'></li>
	<li class='a'></li>
</ul>

 

CSS

원래 내가 알고 있어서 거의 항상 사용하던 방식은 ul 너비를 li 아이의 width*(li 개수)로 해서 ul 통째로 가운데 정렬하는 거였는데 확실히 이 방식은 쓰기 어려운 곳이 많다. 그래서 찾아보니 아래의 내용 중

ul class css의 끝 부분 display 부터 margin-right 부분까지가 키임.

그리고 li class의 width 지정도 하면 li 사이 간격 조절됨.

overflow:hidden 은 float:left가 이 다음 요소(ul, li 다음)에 영향 주지 않게 하려고 넣은 것(일 것..)

.menuCategory {height:120px;line-height:120px;overflow:hidden;padding:15px 0 70px 0;display:table;margin-left:auto;margin-right: auto;}
.a {float:left;width:100px;margin:0 auto;text-align:center;}