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;
}

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

希望有所帮助：）

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

1 个答案: