html - CSS动态文本对齐取决于文本的长度

Question

假设我想涵盖以下 2 个场景（标题是动态的）： IE8+ 仅使用 CSS（无 JS）可以实现吗？

场景 A：短标题标题相对于页面宽度居中对齐

| back button |                 short Title                             |
<-----------------------------------|----------------------------------->

场景 B : 很长的标题标题来填充标题内容区域而不被覆盖在后退按钮上

|             | Very very very very very very very very very very very  |
| back button | Very very very very very very very very long Title      |
<-----------------------------------|----------------------------------->

Answer 1

我能想到的两种方法：

将后退按钮向左浮动，标题将自然换行。

HTML

<div>

    <a href="#" class="back">Back</a>

    <h1>Title</h1>

</div>

CSS

div {
    text-align: center;
}

a.back {
    float: left;
    margin-right: 20px;
}

或者这样，相同的 HTML - 刚刚意识到这不会正确居中，除非您在右侧也有相同的 100px 填充。

div {
    position: relative;
    min-height: 30px;
    padding-left: 100px;
    text-align: center;
}

a.back {
    position: absolute;
    top: 50%; left: 0;
    width: 90px;
    height: 30px;
    margin-top: -15px;
}

第二个将避免任何包装问题，并垂直对齐中间的按钮。

希望有帮助:)