添加其他Div时CSS文本对齐中心不工作

我有一个移动网站标题。“页面标题”应居中，“后退”按钮应向左浮动。“页面标题”完全居中，直到我添加“后退”按钮。添加“后退”按钮后，“页面标题”将“稍微”居中，但会向右推。我错过了什么

我的代码和小提琴：

CSS:

body {
    background-color: #666;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.pageTitle {
    text-align: center;
    padding: 10px;
    color: #ffffff;
    font-size: large;   
    background: #2281b5;
}
.backArrow {
    float: left;    
}

<div class="pageTitle">
<div class="backArrow">
Back
</div>
Page Title</div>

HTML:

body {
    background-color: #666;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.pageTitle {
    text-align: center;
    padding: 10px;
    color: #ffffff;
    font-size: large;   
    background: #2281b5;
}
.backArrow {
    float: left;    
}

<div class="pageTitle">
<div class="backArrow">
Back
</div>
Page Title</div>

返回
页面标题

这个怎么样

绝对定位您的按钮，这样它将从文档的正常流程中删除，并且您的标题将自动居中

.backArrow {    
    position:absolute;
    left:10px;
}

这个怎么样

绝对定位您的按钮，这样它将从文档的正常流程中删除，并且您的标题将自动居中

.backArrow {    
    position:absolute;
    left:10px;
}

---

它稍微向右移动，因为它被“后退”按钮移动。您可以通过绝对定位从文档流中删除“后退”按钮。 像这样：

.backArrow {
    position:absolute;    
}

---

它稍微向右移动，因为它被“后退”按钮移动。您可以通过绝对定位从文档流中删除“后退”按钮。 像这样：

.backArrow {
    position:absolute;    
}