Question: I want to the two span center in the div but i'm failed,how to fix it? Code as below don't effective but when i put a div out of the two span it become effective while display property change to `inline-block`, how could this happen?

```css
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;
}
```

```html
<!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>
```

Answer: 
You can't center it because of `float: left;` on both spans. Just remove the `float: left;` and it will go to center.

You say it works when you wrap the spans inside a `div` with display `inline-block`. That is because that `div` will go to center since it doesn't have `float: left`, and then the spans will `float: left` inside the centered `div`. Hope you got it :)
Another approach could be just using the flexbox model. It's easier and code is short too. 

```css
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;
}
```

```html
<!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: Also to make the code shorter, instead of using `inner1` and `inner2`, I used `.topbar span` in css since both share the same property.