在背景之前和之后对齐h1

Question

I have image before and after h1.

However, I need to position it as following:

• h1 text should be in the center
• h1 before image should start at the left side of container
• h1 after image should end at the right side of container

I cannot get all of them. For example, I can center h1 text, but then h1 before and h1 after images are not aligned correctly. Here is jsfiddle example: http://jsfiddle.net/wK8ve/

Also Html and css here:

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>

And here is live example: http://modeles-de-lettres.org/test/index.php?p=about_us

Answer 1

use float .

In your before and after sections you will want

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

I'm assuming this is what you want anyway, if not clarify.

Answer 2

I guess this is what you want. I used img instead of :before and :after

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