0

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

它在所有网页中都可以正常工作，但现在我有一些额外的两行标题。所以，我需要<h1>用两条线来设计样式。

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

您可以在 jsfiddle 中对其进行测试：http: //jsfiddle.net/kw3KX/ 或在实时网页中查看（稍作修改）：http ://modeles-de-lettres.org/test/

你可以看到<h1>有两行包含文本“Some text here”和“about this site”，对齐是个问题。

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>标签以某种方式修复它吗？

4

3 回答 3

2

:before这是由您应用于and: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 */
}
于 2013-06-30T12:25:25.717 回答
1

您可以将文本包装在 a 中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>
于 2013-06-30T12:10:04.977 回答
0

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

小提琴

于 2013-06-30T12:23:24.567 回答