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，use text-align: center也用于h1

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

将背景图像放在元素旁边

1 个答案: