"title" 或 "header" 对应 div

Question

我正在构建一个简单的 web-page，其中包含几个部分，但我一直被如何解决一个小的样式问题所困扰。

我有几个带有实线边框的 DIV，每个里面都有一些其他 GUI 项目（文本框、按钮等）。每一种 DIV 都将相关项目“装箱”成一种漂亮、视觉上令人愉悦且有意义的方式。但是，我想在边框中间的 DIV 上添加标题或说明，以描述该框的功能。到目前为止，我可以在边框下方或上方添加文本，但不能在中间添加文本。这可能吗？

谢谢！

我有：

我想要的：

Answer 1

你想要的看起来像一个 fieldset 元素，里面有一个 legend 标签，但我不建议使用它们。只需像这样使用 position: absolute：

<div class='section'>
    <header>Header</header>
    ....
</div>

.section{
    position: relative;
}

.section header{
    position: absolute;
    top: 0;
    transform: translate(0, -50%);
    background: white;
}

Answer 2

你要找的是 HTML nativly 内置的：边框框架是 <fieldset> 的一部分，而标题是 <legend>

<fieldset>
  <legend>Header</legend>
</fieldset>

"title" 或 "header" 对应 div

A "title" or a "header" for a div

html

css

asp.net

styling