如何水平居中文字＆amp;垂直在虚线边框内

Question

我需要在垂直和水平方向的虚线边框之间居中显示一些文字，如下图所示：

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

如何将css修改为附加截图？

Answer 1

您可以尝试使用文本浮动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/

Answer 2

您可以使用CSS定位来执行此操作...

检查出来：

My Fiddle （水平）

My Fiddle （垂直）

Answer 3

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

您也可以使用pseudeoelement（：after）

并将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;
}
​