我一直有麻煩設置我的HTML和CSS來模仿這張圖片，。有關如何設置它的任何提示，以便Line，Text，Line全部位於同一垂直線上？行文本行設置代碼

2014-02-27 user1830833

[css技術用於中間有文字的水平線]的可能重複（http://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal-line-with-字中間） –

使用:before/:after和top定位

編輯

查看最新更新JSFiddle。

我說：

*, 
*:before, 
*:after 
{ 
    position: relative; 
} 
.line:after 
{ 
    position: absolute; 
    top: 49px; 
    left: 0; 
    content: ""; 
    height: 1px; 
    width: 100%; 
    background-color: blue; 
} 
.line h3 
{ 
    z-index: 1; 
    display: block; 
    width: 300px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #d1d1d1; 
}

和周圍的h3「在你的HTML我加<div class="line"></div>

例如：

<div class="line"> 
    <h3><span style='color: #ff6c00;'>About</span> Me</h3> 
</div>

AGAIN 變化.line的top到你需要的金額，以及background-color :)

來源

2014-02-27 18:36:16

Thx爲快速響應。我應用了你建議的內容，然後我得到了這一行，但它並不顯示在div的背景顏色上。 http://tinypic.com/view.php?pic=2iqd0xt&s=8#.Uw-OQfldVcg 我試着設置不同的z索引，沒有任何幫助，它顯示在任何東西的頂部，包括文本或背後div如圖所示 – user1830833

HTML http://pastebin.com/4rPv92gn CSS http://pastebin.com/1BLNrfbg – user1830833

行文本行設置代碼

回答

編輯

相關問題