div 标签边框中的文本

Question

我知道这是一个老问题，但我想知道将文本放入 div 标签边框的最佳方法是什么。这就是我所拥有的

.componentWrapper {
  border: solid cadetblue;
  border-radius: 40px;
  padding: 10px;
  width: 95%;
}

<div class='componentWrapper'>Text inside div </div>

我想在 div 标签的边框中添加一个标题。我知道一种选择是使用字段集，但我不喜欢这种方法。另一种方法是放置一个框并将其向上移动并设置背景颜色，但我认为当您在页面上设置不同的背景颜色时这会失败。

什么是最好的解决方案？

Answer 1

我建议使用position:absolute：

.componentWrapper {
  border: solid cadetblue;
  border-radius: 40px;
  padding: 15px 10px 10px;
  width: 95%;
}

.componentWrapper .header {
  position:absolute;
  margin-top:-25px;
  margin-left:10px;
  color:white;
  background:cadetblue;
  border-radius:10px;
  padding:2px 10px;
}

<div class='componentWrapper'><div class="header">Headline</div>Text inside div </div>