テキストの長さに応じた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

私は考えることができる2つの方法：

フロートバックボタンが左に浮かび、タイトルが自然にラップされます。

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

2番目の問題は、ラッピングの問題を回避し、ボタンを中央に垂直に配置することです。戻るボタンの幅 - 役立ちます:)