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元素的浮动引起的。

我建议你把图像置于绝对位置。这会将图像从文档流中提取出来，并且它们不再能够影响其他元素（并弄乱文本）。这样，无论你的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;

<强> FIDDLE

h1在h1之前和之后有两条线和图像

3 个答案: