居中標誌創建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/