Question

我有一个菜单元素，如：

<ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a>
      <ul>
          <li><a href="#">SubItem 1</a></li>
          <li><a href="#">SubItem 2</a></li>
          <li><a href="#">SubItem 3</a></li>
      </ul>
  </li>
  <li><a href="#">Item 4</a></li>
</ul>

该元素绝对定位。如何在不知道宽度的情况下居中（父元素的数量可能会改变）。

此致戴夫

Answer 1

如果你有一个父元素到ul，我认为你可以追求的是什么：

<div class="example">
   <ul> 
     <!-- lots of li's -->
   </ul>
 </div>

然后使用用于居中布局的旧学校文本对齐技巧：

.example {
   text-align: center;
   }

.example ul {
   text-align: left;
   display: inline-block;
   }

请参阅：http://jsfiddle.net/chippper/WK5Z4/

中心元素不知道它的宽度

1 个答案: