css - div边框上的div标题如何

Question

如何使用 Div 为框标题放置如下文本。我可以使用任何 CSS 来放置示例中的 div 标题吗？

例如，带有文本的 div 的顶部边框线将看起来

----Div 标题---------

Answer 1

您可以使用以下 HTML：

<div>
    <h1><span>Div title</span></h1>
</div>

使用以下 CSS：

div{
    border: 1px solid #000;
    width: 200px;
    height: 200px;
}

div h1{
    text-align: center;
    margin-top: -10px;
    height: 20px;
    line-height: 20px;
    font-size: 15px;
}

div h1 span{
    background-color: white;
}

http://jsfiddle.net/MeeW2/