1

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

2 回答 2

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/

于 2013-08-14T08:25:02.747 回答
0

你只需要给

 text-align:center;

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

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

这将使跨度出现在中间。

于 2013-08-14T08:47:48.977 回答