http://html.nhncorp.com/data/ui_library/src/pattern/menu/jcm/tab_face.html#

메뉴를 가운데 정렬하려고 합니다..

검색해 보니까 margin이란 녀석이 가운데 정렬할때 필요한 녀석이라고 하더라구요.

그리고 또한 상우하좌 라는 순서도 있더군요.. 그런데 여기서 질문 이 있습니다..

아래 보시면 코드가 있는데요..

어디부분이 가운데 정렬할 margin부분이죠??

거기다 auto를 주면 된다고 하던데 맞나요??


/* UI Object */
.tab_face{padding:0 0 35px 0}
.tab_face ul{position:relative;margin:0;padding:0;_padding:2px 0 0 0;border-bottom:2px solid #315593;font-family:Tahoma, Sans-serif;font-size:12px;list-style:none;*zoom:1}
.tab_face ul:after{display:block;clear:both;content:""}
.tab_face li{float:left;margin-right:1px;background:#4CB1E5}
.tab_face li a,
.tab_face li a span{position:relative;cursor:pointer}
.tab_face li a{float:left;text-decoration:none}
.tab_face li a span{display:inline-block;padding:6px 25px 6px 25px;color:#fff}
.tab_face li ul{display:none;overflow:hidden;position:absolute;top:40px;left:0;width:100%;margin:0;padding:0;border:0;white-space:nowrap;list-style:none;*zoom:1}
.tab_face li ul:after{display:block;clear:both;content:""}
.tab_face li li{overflow:visible;position:relative;left:-1px;padding:0 10px;border-left:1px solid #ddd;background:transparent}
.tab_face li li a{padding:0;margin:0;font-weight:normal;color:#666}
.tab_face.m1 .m1,
.tab_face.m2 .m2,
.tab_face.m3 .m3,
.tab_face.m4 .m4,
.tab_face.m5 .m5,
.tab_face.m6 .m6,
.tab_face.m7 .m7,
.tab_face.m8 .m8,
.tab_face.m9 .m9,
.tab_face.m10 .m10,
.tab_face.m11 .m11,
.tab_face.m12 .m12{margin-top:-1px;background-color:#315593}
.tab_face.m1 .m1 a span,
.tab_face.m2 .m2 a span,
.tab_face.m3 .m3 a span,
.tab_face.m4 .m4 a span,
.tab_face.m5 .m5 a span,
.tab_face.m6 .m6 a span,
.tab_face.m7 .m7 a span,
.tab_face.m8 .m8 a span,
.tab_face.m9 .m9 a span,
.tab_face.m10 .m10 a span,
.tab_face.m11 .m11 a span,
.tab_face.m12 .m12 a span{padding-top:7px;padding-bottom:7px;font-weight:bold;letter-spacing:-1px}
.tab_face.m1 .m1 ul,
.tab_face.m2 .m2 ul,
.tab_face.m3 .m3 ul,
.tab_face.m4 .m4 ul,
.tab_face.m5 .m5 ul,
.tab_face.m6 .m6 ul,
.tab_face.m7 .m7 ul,
.tab_face.m8 .m8 ul,
.tab_face.m9 .m9 ul,
.tab_face.m10 .m10 ul,
.tab_face.m11 .m11 ul,
.tab_face.m12 .m12 ul{display:block}
.tab_face li li a:hover,
.tab_face li li a:active,
.tab_face li li a:focus,
.tab_face.s1 .s1 a,
.tab_face.s2 .s2 a,
.tab_face.s3 .s3 a,
.tab_face.s4 .s4 a,
.tab_face.s5 .s5 a,
.tab_face.s6 .s6 a,
.tab_face.s7 .s7 a,
.tab_face.s8 .s8 a,
.tab_face.s9 .s9 a,
.tab_face.s10 .s10 a,
.tab_face.s11 .s11 a,
.tab_face.s12 .s12 a{font-weight:bold;color:#333;letter-spacing:-1px}
.tab_face.js_off{padding:0}
.tab_face.js_off ul{border:0}
.tab_face.js_off li{float:none}
.tab_face.js_off li a{float:none;font-weight:bold}
.tab_face.js_off li ul{display:block;position:static;left:0;top:0;padding:5px 0;background:#fff}
.tab_face.js_off li li{display:inline}
.tab_face.js_off li li a{font-weight:normal !important;color:#333;letter-spacing:normal}
.tab_face.js_off li li a:hover,
.tab_face.js_off li li a:active,
.tab_face.js_off li li a:focus{text-decoration:underline}
/* //UI Object */

근데 보시면