取決於文本長度的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動態文本對齊方式

回答

相關問題