我想在div中建立两个跨度中心，但是失败了，如何解决？下面的代码无效，但是当我将div从两个跨度中取出时，它会生效，而显示属性更改为inline-block，这怎么会发生？
body{
margin: 0;
padding: 0;
}
.topbar{
border: 1px solid;
max-width: 800px;
height: 20px;
}
.inner1{
float: left;
border: 1px solid red;
}
.inner2{
float: left;
border: 1px solid red;
}
.clearfix::after{
content: "";
clear: both;
display: block;
}
.topbar{
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<meta name="description" content="很奇怪inline-block能对齐，inline不能对齐" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="topbar ">
<span class="inner1">register</span>
<span class="inner2">login</span>
</div>
</body>
</html>你的 inner1 和 inner2 类中有float: left，它们将跨度移动到左边。只需删除它们即可正常工作。下面是更新的代码。
body{
margin: 0;
padding: 0;
}
.topbar{
border: 1px solid;
max-width: 800px;
height: 20px;
}
.inner1{
border: 1px solid red;
}
.inner2{
border: 1px solid red;
}
.clearfix::after{
content: "";
clear: both;
display: block;
}
.topbar{
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<meta name="description" content="很奇怪inline-block能对齐，inline不能对齐" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="topbar ">
<span class="inner1">register</span>
<span class="inner2">login</span>
</div>
</body>
</html>由于
两个跨度上的float: left;，您无法将其居中。只需取下float: left;，它就会进入中心。
您说当您使用显示inline-block将跨度包装在div内时它有效。那是因为div会去中心，因为它没有float: left，然后跨度会float: left在居中的div内。希望你得到它:)
另一种方法可能是只使用 flexbox 模型。它更容易，代码也很短。
body {
margin: 0;
padding: 0;
}
.topbar {
border: 1px solid;
max-width: 800px;
height: 20px;
display: flex;
justify-content: center;
}
.topbar span {
border: 1px solid green;
}<!DOCTYPE html>
<html>
<head>
<meta name="description" content="很奇怪inline-block能对齐，inline不能对齐" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="topbar ">
<span class="inner1">register</span>
<span class="inner2">login</span>
</div>
</body>
</html>PS：同样为了使代码更短，而不是使用inner1和inner2，我在css中使用了.topbar span，因为两者都共享相同的属性。