在背景之前和之后對齊h1

Question

我在h1之前和之后都有圖像。

但是，我需要將其定位如下：

• h1文本應該在中心
• 圖像之前的h1應該從容器的左側開始
• 圖像后的h1應該在容器的右側結束

我不能得到所有這些。 例如，我可以居中h1文本，但之后是h1之前和h1之后圖像未正確對齊。 這是jsfiddle的例子： http ： //jsfiddle.net/wK8ve/

還有Html和css：

CSS：

.test {
    border: 1px solid black;
    width: 1000px;
    height: 200px;
}
h1 {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #5d5d5d;
    margin: 0 0 32px 0;        
}

h1:before {
    text-align: left;
    background-image: url('http://modeles-de-lettres.org/test/images/h_ltr.png');
    background-repeat: no-repeat;     
    background-position: center left;   
    padding: 0 352px 0 0;
    content: "\00a0";
}

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 180px;
    content: "\00a0";
}

HTML：

<div class="test">
    <h1>Test</h1>
</div>

以下是現場示例： http ： //modeles-de-lettres.org/test/index.php？p = about_us

Answer 1

使用float 。

在你需要的前后部分

http://jsfiddle.net/wK8ve/1/

h1:before {
    text-align: left;
    background-image: url('http://modeles-de-lettres.org/test/images/h_ltr.png');
    background-repeat: no-repeat;     
    background-position: center left;   
    padding: 0 352px 0 0;
    content: "\00a0";
}

h1:after {
    float: right;
    background-image: url('http://modeles-de-lettres.org/test/images/h_rtl.png');
    background-repeat: no-repeat;    
    background-position: center right;
    padding: 0 180px;
    content: "\00a0";
}

我假設這是你想要的，如果不澄清的話。

Answer 2

我想這就是你想要的。 我用img代替:before和:after

http://jsfiddle.net/wK8ve/2/