Html 当文本太长时，如何使流体文本居中并带有边距？

我有HTML：

请看：）

我想（1）当文本短时使文本中心对齐，但（2）当文本太长时不要覆盖左侧的“后退”按钮

正如您在JSFIDLE中所看到的，我在第二个示例中添加了一个

左边距

有什么通用的CSS方法可以实现这一点吗？

试试这个

<div class="header">
    <h1>Title</h1>
</div>
.header{margin:0 15px 0 72px;} //margin-left-->42px of width and 30px of margin for back

标题
.header{margin:0 15px 0 72px；}//左边距-->宽度为42px，背面为30px

---

希望它能帮助你。

试试这个我更新了你的JSFIDLE看看这个

---

jsfiddle

：

然后标题没有居中于整个栏中：（当文本较短时，看起来有点奇怪。

.title {
    height: 36px;
    line-height: 36px;
    position: relative;
    overflow: hidden;
    background-color: #eee;
    margin-bottom: 30px;
}

.back {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 15px;
    height: 36px;
    line-height: 36px;
    width: 42px;
    overflow: hidden;
    background-color: #ccc;
}

.title h1 {
    margin: 0;
    font-size: 24px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

<div class="header">
    <h1>Title</h1>
</div>
.header{margin:0 15px 0 72px;} //margin-left-->42px of width and 30px of margin for back