需要一些文字之前和之後的虛線html

Question

在我的網站上我需要一些文字和虛線前後。像這樣：

------------------- Image Width（100px）------------------- -------

有人可以幫我完成這件事。我嘗試了谷歌搜索，但我找不到任何東西。 有完整的虛線/邊界線，但沒有像這樣。

Answer 1

設置一個容器並創建一個位於中間並帶有虛線邊框的<div>。

請參閱DEMO。

<div class='container'> 
    <img src='http://dummyimage.com/100/000/fff' /> 
    <div class='line'></div> 
</div> 

.container { 
    position: relative; 
    text-align: center; 
} 

.line { 
    border-top: 1px dashed #000; 
    width: 100%; 
    position: absolute; 
    top: 50%; 
    z-index: -2; 
} 

同樣的文字，給它一些背景和填充，你是好去。

<div class='container'> 
    <span class='text'>some text</span> 
    <div class='line'></div> 
</div> 

.text { 
    background-color: #FFF; 
    padding: 0 3px; 
}