가변 너비 부모 하위 센터 하위 메뉴

Question

죄송합니다. 이전에 질문을 받았다면 여러 가지 옵션을 시도해 보았지만 제대로 작동하지 않는 것 같습니다. 내 하위 메뉴를 중앙에 놓고 싶습니다. 각 상위 항목에는 가변 폭이 있고 하위 메뉴 항목에도 가변 너비가 있습니다. 이것은 내 코드입니다.

.menu-wrap ul li{margin:0;padding:0;display:inline-block} 
.menu-wrap ul li>a{font-size:16px;color:rgba(0,0,0,.6);display:block} 
.menu-wrap ul li>ul{position:absolute;float:left;left:0;right:auto;top:90px;width:auto;padding:10px 0;background:#fff;opacity:0;border-top:solid 1px rgba(245,130,32,1)} 
.menu-wrap ul li.parent:hover>ul{opacity:1} 


<ul class="nav menu"> 
    <li class="item-101"><a href="/">Home</a></li> 
    <li class="item-129 parent"><a href="/about/about-us.html">About</a> 
    <ul class="nav-child"> 
     <li class="item-148"><a href="/about/about-us.html">About Us</a></li> 
     <li class="item-116"><a href="/about/testimonials.html">Testimonials</a></li> 
    </ul> 
    </li> 
    <li class="item-114 parent"><a href="/services/services-page-example.html">Services</a> 
    <ul class="nav-child"> 
     <li class="item-122"><a href="/services/services-page-example.html">Services Page Example</a></li> 
     <li class="item-123"><a href="/services/services-page-example-2.html">Services Page Example 2</a></li> 
     <li class="item-124"><a href="/services/services-page-example-3.html">Services Page Example 3</a></li> 
    </ul> 
    </li> 
    <li class="item-154"><a href="/case-studies.html">Case Studies</a></li> 
    <li class="item-115"><a href="/gallery.html">Gallery</a></li> 
    <li class="item-149"><a href="/frequently-asked-questions.html">FAQ's</a></li> 
    <li class="item-117"><a href="/contact.html">Contact</a></li> 
</ul> 

현재는 왼쪽 정렬입니다.

Answer 1

나는 최근에이 안내서를 발견했으며 도움이되었다.

http://css-tricks.com/centering-css-complete-guide/