h1 with two lines and image before and after h1

Question

I have <h1> with image before and after it.

It works fine within all webpages, but now I have some additional headings with two lines. So, I need to style <h1> with two lines.

If I use the existing style with image before and after then text align is a problem.

You can test it in jsfiddle: http://jsfiddle.net/kw3KX/ Or see it in realtime webpage (a bit modified): http://modeles-de-lettres.org/test/

You can see that <h1> with two lines contains text "Some text here" and "about this site" and alignment is a problem.

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

So is it possible to fix it somehow with <h1> tag?

Answer 1

This is beeing caused by the float you apply to the :before and :after elements.

I would advise you to postion the images absolute instead. This lifts the images out of the document flow, and they can no longer influence the other elements (and mess up your text). This way your layout will keep working, no matter the number of lines in your h1.

I updated your fiddle: http://jsfiddle.net/kw3KX/2/

and the relevant 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 */
}

Answer 2

you may wrap the text in a span and do display: inline-block; for that span , and do some margin-top to adjust the alignment with the images:

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

Answer 3

Use the white-space property: white-space:pre;

FIDDLE