需要一些文字之前和之后的虚线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; 
}