h1帶有兩行和h1前後圖像

Question

我有<h1>前後有圖像。

它可以在所有網頁中正常工作，但現在我有一些額外的兩行標題。 所以，我需要用兩條線樣式<h1>。

如果我在使用現有樣式之前和之後的圖像，然後文本對齊是一個問題。

你可以的jsfiddle測試：http://jsfiddle.net/kw3KX/ 還是看實時網頁（有點修改）：http://modeles-de-lettres.org/test/

你可以看到，<h1>有兩行包含文本「這裏有些文本」和「關於本網站「並且對齊是一個問題。

HTML：

<div id="content-wrapper"> 
    <h1> 
      Some text here 
     </h1> 

</div> 

CSS：

h1 { 
    text-align: center; 
    font-size: 22px; 
    font-weight: bold; 
    color: #5d5d5d; 
    margin: 41px 0 32px 0; 
} 
h1:before { 
    background-image: url('http://modeles-de-lettres.org/test/images/h_ltr.png'); 
    background-repeat: no-repeat; 
    padding: 0 152px 0 0; 
} 
#content-wrapper { 
    width: 1000px; 
    margin: 0px auto; 
    position: relative; 
} 

那麼，這可能與<h1>標籤以某種方式解決這個問題？

Answer 1

，你可以換文本的span併爲span做display: inline-block;，並做一些margin-top調整與圖像的比對：

<h1> 
     <span style="display:inline-block; margin-top:-16px;">Some text here<br> 
     about this site</span> 
</h1> 

Answer 2

使用空白屬性：white-space:pre;

FIDDLE

Answer 3

這是由於您申請到:before和:after元素。

我會建議你將絕對圖像置於絕對位置。這將圖像從文檔流中提取出來，並且不再影響其他元素（並且弄亂了文本）。這樣，無論h1中的行數如何，您的佈局都能繼續工作。

我更新了你的提琴：http://jsfiddle.net/kw3KX/2/

及相關的CSS：

h1 { 
    text-align: center; 
    font-size: 22px; 
    font-weight: bold; 
    color: #5d5d5d; 
    margin: 41px 0 32px 0; 
    position: relative; /* added so the position absolute will work */ 
} 
h1:before { 
    background-image: url('http://modeles-de-lettres.org/test/images/h_ltr.png'); 
    background-repeat: no-repeat; 
    background-position: center left; 
    padding: 0 317px 0 0; 
    content:"\00a0"; 
    /* added */ 
    position: absolute; 
    left: 0; 
    top: 50%; 
    margin-top: -7px; /* half the height of the image, to center it */ 
} 
h1:after { 
    background-image: url('http://modeles-de-lettres.org/test/images/h_rtl.png'); 
    background-repeat: no-repeat; 
    background-position: center right; 
    padding: 0 317px 0 0; 
    content:"\00a0"; 
    /* added */ 
    position: absolute; 
    right: 0; 
    top: 50%; 
    margin-top: -7px; /* half the height of the image, to center it */ 
}