Question

考虑以下问题：您希望将菜单居中，这将改变其内容（例如，在按下按钮后，第一个按钮的内容是将其设置为“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>

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

Answer 2

你只需要给予

 text-align:center;

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

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

这将使跨度显示在中间。

中心宽度未知的元素

2 个答案: