将背景图像放在元素旁边

Question

我有一个h1标签。

标签位于div中页面的中心。 我需要在其旁边放置装饰性图像。

它必须看起来像这样

-------------------------- h1 ----------------------------

如果我固定图像，则效果很好。 我想要的是，如果我增加h1的大小（通过添加更多文本），则边会相应缩小。 像这样

------------------------ h1 h1 h1 ------------------------


 h1:before {
        background-image:url('../img/dual_bg.png');
        padding: 0 20px;
        content: " ";
        background-repeat: repeat-x;
        background-position-y: 50%;
        margin-right:20px;
    }
    h1:after {
        background-image:url('../img/dual_bg.png');
        padding: 0 20px;
        content: " ";
        background-repeat: repeat-x;
        background-position-y: 50%;
        margin-left:20px;
    }

    h1{
        text-align:center;
    }

如前所述，如果增加填充值，我将获得理想的结果。 但是，我需要一种更好的方法。 有什么建议么？

Answer 1

您的解决方案是添加宽度样式，尝试使用max-width ， min-width并将其放入DIV中，然后对标签h1使用填充，对h1也use text-align: center 。

现在，当您添加更多文本时，div的大小将保持不变，并且文本将在同一行上填充较少。