align h1 before and after background
- by renathy
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
