如何虚线边框

内水平和垂直居中的文本，我需要垂直和水平居中虚线边框之间的一些文字，如下图：如何虚线边框

enter image description here

我有一个very simple fiddle它试图实现这一目标。

如何修改css以显示为附加的截图？

来源

2012-07-25 user701254

的http：//的jsfiddle .net/eCUv9/16/ – CKKiller 2012-07-25 14:18:27

您可以使用CSS定位来做到这一点...

检查了这一点：

My Fiddle（水平）

My Fiddle（垂直）

来源

2012-07-25 14:25:22

是否有可能不改变背景颜色，但在同一时间边框不会出现在这样的文本后面像这个小提琴：http://jsfiddle.net/aHNh6/4/？ – user701254 2012-07-25 15:02:39

@ user701254不，你必须使用'background-color' abd你的意思是没有出现或出现？ – 2012-07-25 15:06:56

我的意思是，我想保持与正在绘制文字的背景颜色相同，但同时没有看到文字后面出现边框。希望这更有意义。我只能更改文本的背景颜色以匹配正在绘制文本的背景颜色 – user701254 2012-07-25 15:09:45

您可以尝试使用文本浮动div并为其放置边界。

HTML

<div id="dotted"> 
    <div id="text">Text goes here.</div> 
</div>

CSS

#dotted { 
    border-top:1px dotted #000; 
    padding:10px; 
} 

#text { 
    float:left; 
    padding:0 10px 0 10px; 
    margin:-20px 0 0 30px; 
    background:#fff; 
}

JS小提琴：http://jsfiddle.net/aBDjY/2/

来源

2012-07-25 14:13:24 JSW189

是否可以不更改背景颜色，但同时边框不会出现在文本后面，如此小提琴http://jsfiddle.net/aBDjY/3/ – user701254 2012-07-25 15:03:05

@ user701254。总之，没有。在这种方法中，我将文本移到边界上。如果没有设置背景颜色，则线条将通过文本显示。希望有所帮助！ – JSW189 2012-07-25 16:02:05

http://jsfiddle.net/lukas2012/aHNh6/5/

你也可以用pseudeoelement工作（：后）

并使用text-align: center与display: inline-block

这样它会与任何文字工作，你的布局会不会激怒走动

相对元素要保持的背景色动态只需使用background-color: inherit;

.wrap{ 
    position: relative; 
    margin: 100px auto; 
    width: 500px; 
    text-align: center; 
    background: #ff0; 

} 
.wrap:after { 
    content: ''; 
    border-top:1px dotted #000; 
    position: absolute; 
    left: 0; 
    z-index: 0; 
    top: 50%; 
    width: 100%; 
    height: 1px; 

} 

.text { 
    background-color: inherit; 
    position: relative; 
    margin:0 auto; 
    display: inline-block; 
    z-index: 1; 
}

来源

2012-07-25 14:56:57 Lukas2012

如何虚线边框

回答

相关问题