用css写出一个“左对齐+居中对齐”

Question

看似很简单的布局，但把我难住了

设计稿如下

我最开始想到的是用text-align:center将标题居中，然后用定位将“返回”定在左侧。

但是这种方法好麻烦的，有简单一点的实现方式么？

Answer 1

1.浮动float了解一下？

  <div class="container">
    <span class="return">返回</span>
    <span class="title">2018年8月工资条</span>
  </div>

.container {
  border: 1px solid black;
  padding: 10px;
  text-align: center;
}
.return {
  float: left;
}

2.楼上办法也是可行哦

  <div class="container">
    <span class="return">返回</span>
    <span class="title">2018年8月工资条</span>
    <span></span>
  </div>

.container {
  border: 1px solid black;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}

3.定位方法是有什么麻烦吗~~

.container {
  border: 1px solid black;
  padding: 10px;
  position: relative;
  text-align: center;
}
.return {
  position: absolute;
  left: 0;
  padding-left: 10px;
}

Answer 2

flex space-between
最后来个空元素