html - 创建带有居中徽标的 CSS 标题，以及从透明 PNG 的右侧/左侧延伸出来的线条

Question

我一直在尝试创造这种外观：

我认为一个聪明的方法是创建一个无序列表，让左/右的条使用 100% 的宽度，而不是徽标所占用的宽度。

显然，我在这方面失败了。

有问题的网站是实时的，你可以在这里访问它（查看我到目前为止创建的代码）：http ://amydemosphotography.smugmug.com/galleries

我无法使条形图和徽标占据相同的垂直空间，并且我无法解决如何使它们随着浏览器窗口增大/缩小同时允许徽标始终保持 1) 的问题保持居中，并且 2）总是在左/右有填充（所以线条永远不会接触/穿过它）。

我究竟做错了什么？

Answer 1

这是我的做法：

<h1><img src="http://cdn.smugmug.com/photos/2254208423_RS5b5Z6-O.png" alt="Logo"></h1>

--

body {
    padding-top: 3em;
}
h1 {
    color: #333;
    display: table;
}
h1:after,
h1:before {
    background-image: -webkit-linear-gradient(transparent 40%, #87a 40%, #87a 60%, transparent 60%);
    background-image:    -moz-linear-gradient(transparent 40%, #87a 40%, #87a 60%, transparent 60%);
    background-image:     -ms-linear-gradient(transparent 40%, #87a 40%, #87a 60%, transparent 60%);
    background-image:      -o-linear-gradient(transparent 40%, #87a 40%, #87a 60%, transparent 60%);
    background-image:         linear-gradient(transparent 40%, #87a 40%, #87a 60%, transparent 60%);
    content: '';
    display: table-cell;
    width: 50%;
/* Everything below allows us to have a little bit of space between the title and the decoration */
    -webkit-background-clip: padding;
       -moz-background-clip: padding;
            background-clip: padding;
}
h1:after {
    border-left: 1.5em solid transparent;
}
h1:before {
    border-right: 1.5em solid transparent;
}
​

这是一个活生生的例子：http: //jsfiddle.net/joshnh/XjXYE/