html - 如何在虚线边框内水平和垂直居中文本

Question

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

我有一个非常简单的小提琴试图实现这一点。

如何修改 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

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

您还可以使用伪元素 (: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;
}
​

Answer 3

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

看一下这个 ：

我的小提琴（水平）

我的小提琴（垂直）