考虑下面的问题:你想让一个菜单居中，这会改变它的内容(例如按下一个按钮后，第一个按钮的内容是将它从“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>
最佳答案
如果你让 ul 成为 block 元素，那么它会占据整个宽度，你可以将 li 设置为 display:inline-block。现在 li 项是内联 block ，它们可以通过 text-align:center;
ul {
display:block;
text-align:center;
}
li {
display:inline-block;
}
fiddle :
关于css - 以未知宽度居中元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18226534/