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

假设我想说明下面的两种情况（标题是动态的）：对于IE8 +，只能使用CSS（无JS）来实现吗？取决于文本长度的CSS动态文本对齐方式

情形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  | 
<-----------------------------------|----------------------------------->

来源

2012-02-29 seb

我可以想到的两种方法：

将后退按钮向左浮动，标题将自然包裹。

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~~ - 只要正确认识到这一点不会心的事，除非你对同100像素填充右手边也是如此。

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

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

希望帮助:)

来源

2012-02-29 11:28:54 will

感谢威尔，看来标题不居中对齐相对于页面的总宽度而是总宽度 - 后退按钮的宽度。我在这里错过了什么？ @see http://jsfiddle.net/fhrQX/1/ – seb 2012-02-29 12:03:09

对不起，我的错误，我不确定这是可能的。浏览器必须以每行为基础计算中心点，因此即使将文本环绕为一个浮点，中心点仍位于该实际线的中间。这可能是你最好的折中方案：http://jsfiddle.net/will/fhrQX/14/ – will 2012-02-29 15:23:50

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

回答

相关问题