Html div 边框上的 div 标题如何

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19868267/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 15:11:19  来源:igfitidea点击:

Div Title on div border how to

csshtml

提问by Joshi

How can I place a text like below for a box title using Div. Any CSS which I can use to place title of the div like in the example?

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

for example top border line of div with text will look

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

----Div Title---------

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

回答by Borre Mosch

You can use the following HTML:

您可以使用以下 HTML:

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

With the following CSS:

使用以下 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/

http://jsfiddle.net/MeeW2/