居中宽度未知的元素答案

【问题标题】：Centering elements with unknown width居中宽度未知的元素
【发布时间】：2013-08-14 16:47:48
【问题描述】：

考虑以下问题：你想将一个菜单居中，这将改变它的内容（例如按下一个按钮后，第一个按钮的内容是将它从“Hello”设置为“Greetings, user！”或者沿着这些思路。重要的是元素的宽度将是一个变量。

假设您还想将元素的内容居中。我发现的一种方法基本上是这样的：

 .centerMe1 {  
     margin-right: auto ;
     margin-left: auto ;
     max-width: 500px;
 }

这很好用，只是在这种情况下我不能使用它，因为我不知道元素的宽度。我尝试使用 float:left，因为它将父项的宽度设置为等于其子项的宽度，但它不起作用。基本上宽度设置正确，但元素没有居中。

这是第二课：

.centerMe2 {
     margin-right: auto ;
     float: left;
     margin-left: auto ;
}

以及整个源代码（使测试更容易）

<!DOCTYPE html>
<html>
    <head>
       <title>Center Error</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
         <script src="http://code.jquery.com/jquery.js"></script>
         <style type="text/css">
             .centerMe1 {  
                 margin-right: auto ;
                 margin-left: auto ;
                 max-width:500px;
             }
             .centerMe2 {
                 margin-right: auto ;
                 float: left;
                 margin-left: auto ;
             }
         </style>
   </head>

  <body>
      <div class="row-fluid">
         <div class="span12">
             <ul class="nav nav-pills centerMe1">
                 <li class="active"><a href="#">adsadw er sdfw</a> </li>
                 <li><a href="#">QQQQQQQQQQQQQ</a></li>
                 <li><a href="#">some other random gibberish</a></li>
             </ul>
         </div>
      </div>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

【问题讨论】：

.centerMe1 如果您删除了max-width 属性，它将正常工作。 float 不会工作
js 解决方案会超出你的范围吗？
我认为您还需要将“text-center”css 类添加到其容器中。顺便说一句，为 div 提供“span12”类是非常多余的。你可以删除这个 div。
#x4rf41 你是对的。请将其作为答案发布，以便线程计时器到期时我可以接受。
也许你想看看this post

标签： css twitter-bootstrap

【解决方案1】：

如果您将ul 设为块元素，那么它将占据整个宽度，您可以将li 设置为display:inline-block。现在 li 项目是内联块，它们可以以 text-align:center; 为中心

ul {
    display:block;
    text-align:center;
}

li {
    display:inline-block;
}

小提琴：

http://jsfiddle.net/CZ9pX/1/

【讨论】：

【解决方案2】：

你只需要付出

 text-align:center;

到外部容器，不要使用浮动。使用display:block。

div{ text-align:center;display:block}
div span{font-size:12px;}

这会使 span 出现在中间。

【讨论】：