묻고답하기
user_layout에서 메뉴 가운데 정렬 하는 법 조언 부탁드립니다.
2012.05.03 16:38
user_layout에서 시작해서 스킨을 만들어 보려는데 시작단게에서 막히네요.
gnb div에 들어있는 ul, li로 되어있는 1차 메뉴를 전체 중앙 정렬을 하고 싶은데...
wrappping 씌워서 margin: auto 0; 처리도 해보고 했는데 답이 없네요.
혹시 힌트 주실 수 있는 분 있으실까요?
소스는 기본 소스지만 다음과 같습니다.
<div class="gnb">
<ul>
<li loop="$global_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']"><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
<ul cond="$val1['list']">
<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']"><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></li>
</ul>
</li>
</ul>
</div>
.gnb {height: 50px;}
.gnb ul {float: center; text-align: center;}
.gnb ul li {float: left; margin-right: 50px; list-style-type: none;}
어떻게 해도 중앙정렬이 안됩니다...
조언 기다리겠습니다.
어제부터 한참 고생하다가 여기에 질문글을 남기면 해결이 되네요.
li를 메뉴 크기에 맞게 줄이기 위해서 css에 float: left; 를 줬었는데,
그 float: left를 지우고 display: inline-block; 처리를 해주면 됩니다.