html - 将背景图像放在元素旁边

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的padding，并且 对 h1 也使用 text-align: center。

现在，当您添加更多文本时，div 的大小将保持不变，并且文本将以更少的内边距显示在同一行上。