如何浮动两个跨度内居中div？

Question

我试图在一个区域内放置一个div，并保持它垂直居中，然后它的内部有两个跨度，一个向左浮动，另一个向右浮动。但是我似乎不能同时做这两件事。我在React中这样做，但我不认为这会有什么不同，但我加入它来解释语法。

我先说：

<ResultsHeader>
    <span style={{ float: 'left'}}>Results</span>
    <span style={{ float: 'right' }}{props.results.length} items found</span>
</ResultsHeader>

然后我有ResultsHeader定义为：

const ResultsHeader = styled('div')({
    alignItems: "center",
    backgroundColor:'#CCCCCC',
    color: '#686868',
    display: 'flex',
    height: 60,
    fontFamily: 'Lato',
    fontSize: 18,
    paddingLeft: 20
});

当我这样做时，我会将所有span文本移到左侧，例如找到的Results4项。如果我将显示更改为'block'，跨距将正确浮动，但文本不再垂直居中。取而代之的是，这一切都在分区的顶部。

我尝试过其他显示选项（例如'inline-flex'），它们甚至更糟糕。我找不到任何有意义的显示选项。我甚至尝试添加另一个跨度来包装两个浮动的跨度，并尝试在它和ResultsHeader元素之间混合'block'和'flex'显示，但这也不起作用。

Answer 1

在一个显示中忽略了浮动属性：flex父母
使用flex属性，在容器上改为，证明-内容：空间-之间

Answer 2

保持垂直居中，然后在其内部有两个跨距，一个向左浮动，另一个向右浮动。

只需使用flexbox即可实现该布局，无需使用float。

1. 删除float:left和float:right
2. 添加justifyContent:“之间的空格”到ResultsHeader

div {
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

<div>
  <span >Results</span>
  <span> items found</span>
</div>