中心子菜单 [英] center submenu under variable width parent

问题描述

对不起，如果这已被问过，我看过，并尝试了几个选项，但我似乎不能得到这个工作。我想把我的子菜单。每个父项具有可变宽度，子菜单项也有可变宽度..这是我的代码：

sorry if this has been asked before, I've looked and have tried several options but I can't seem to get this to work. I want to center my submenu. Each parent item has variable widths, and the submenu items also have variable widths.. This is my code:

.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>

目前只是左对齐。

推荐答案

我最近看过这本指南，发现它很有帮助。

I came across this guide recently and found it helpful.

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

这篇关于中心子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！