具有两行的h1和h1之前和之后的图像

Question

我在图像之前和之后都有<h1> 。

在所有网页上都可以正常工作，但是现在我有一些额外的标题，包括两行。 因此，我需要用两行设置<h1>样式。

如果我在图像前后使用现有样式，则文本对齐是一个问题。

您可以测试它的jsfiddle： http://jsfiddle.net/kw3KX/还是看实时网页（有点修改）： http://modeles-de-lettres.org/test/

您可以看到两行的<h1>包含文本“此处有文本”和“关于此站点”，并且对齐方式是个问题。

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

那么是否可以通过<h1>标签对其进行修复？

Answer 1

这是由于您对:before和:after元素应用了float引起的。

我建议您将图像绝对放置。 这将图像从文档流中移出，它们将不再影响其他元素（并弄乱了您的文本）。 这样，无论h1中的行数如何，您的布局都将继续工作。

我更新了您的小提琴： http : //jsfiddle.net/kw3KX/2/

和相关的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

您可以将文本包裹在一个span并display: inline-block; 对于该span ，并做一些页margin-top以调整与图像的对齐方式：

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

Answer 3

使用空白属性： white-space:pre;

小提琴