在不知道其宽度的情况下居中元素答案

【问题标题】：Center element without knowing its width在不知道其宽度的情况下居中元素
【发布时间】：2012-04-17 02:19:17
【问题描述】：

我有一个菜单元素，例如：

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

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

问候，戴夫

【问题讨论】：

中心是哪个元素？父级 UL？中心它与什么有关？屏幕？家长？宇宙？

标签： html width center

【解决方案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/

【讨论】：