0

我在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

4

2 回答 2

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

我假设这就是你想要的，如果没有澄清的话。

于 2013-06-28T16:23:53.753 回答
1

我想这就是你想要的。我用img而不是:before和:after

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

于 2013-06-28T16:26:31.380 回答