Html 如何获取标题框中的所有内容并将标题居中（参考资料）

我正在用html+css设置一个标题框。我希望所有内容都在标题框的边框内，但标题（参考资料）除外。我该怎么做

我希望标题（参考资料）打断上边框，我希望它居中，在左右两侧有一些填充

以下是我的JSFIDLE：

.resources框{
填充：8px；
背景色：#e2e3e4；
宽度：100%；
填充：20px0；
溢出：隐藏；
}
.专栏资源框{
宽度：193px；
浮动：左；
利润率：15px；
字号：0.9em；
}
.栏目资源框img{
边框：1px实心#2251a4；
}
h4{
字体系列：乔治亚、赫尔维蒂卡、Arial；
字体大小：1.1米；
字体大小：正常；
保证金：1em 0.6em 0；
}
h4.1-bar a{
字体系列：格鲁吉亚；
字体大小：11px！重要；
颜色：#ffffff！重要；
背景色：#2251a4；
垫面：4px；
垫底：4px；
文本对齐：居中；
文本转换：大写；
显示：块；
}
h4.3-a栏：悬停{
背景色：#f66511；
颜色：#fff！重要；
}
.标题栏{
边框：#f66511 1px虚线；
填充：0 5px；
}
.标题框#摘要{
位置：相对位置；
顶部：-0.5em；
左边距：1米；
显示：内联；
背景色：白色；
颜色：#2251a4；
字体系列：SegoeBold、Helvetica、Arial；
字号：26px；
线高：34px；
裕度：0 10px 0；
文本对齐：居中；
}
.title_box#content{}

资源

您必须添加一个

clear

属性来清除

left

float

您已应用于

.column resources box

.clear { 
  clear: left;
}

}
.资源箱{
填充：8px；
背景色：#e2e3e4；
宽度：100%；
填充：20px0；
溢出：隐藏；
}
.专栏资源框{
宽度：193px；
浮动：左；
利润率：15px；
字号：0.9em；
}
.栏目资源框img{
边框：1px实心#2251a4；
}
h4{
字体系列：乔治亚、赫尔维蒂卡、Arial；
字体大小：1.1米；
字体大小：正常；
保证金：1em 0.6em 0；
}
h4.1-bar a{
字体系列：格鲁吉亚；
字体大小：11px！重要；
颜色：#ffffff！重要；
背景色：#2251a4；
垫面：4px；
垫底：4px；
文本对齐：居中；
文本转换：大写；
显示：块；
}
h4.3-a栏：悬停{
背景色：#f66511；
颜色：#fff！重要；
}
.标题栏{
边框：#f66511 1px虚线；
填充：0 5px；
}
.标题框#摘要{
位置：相对位置；
顶部：-0.5em；
左边距：1米；
颜色：#2251a4；
字体系列：SegoeBold、Helvetica、Arial；
字号：26px；
线高：34px；
裕度：0 10px 0；
文本对齐：居中；
宽度：100%；
}
#总结。总结内容{
背景色：白色；
显示：内联块；
}
.title_box#content{}
.清楚{
清除：左；
}

资源

不确定您到底想要什么。离这儿近吗

我将内容移出了

div class=“title\u box”

，并修改了css

<div class="title_box" id="resoruces">
    <div id="summary">Resources</div>
</div>

.title_box #summary { 
    background-color: white; 
    color: #2251a4;
    font-family: SegoeBold,Helvetica,Arial;
    font-size: 26px;
    line-height: 34px;
    margin: 0 0 10px 0;
    text-align: center;
}

资源
.标题框#摘要{
背景色：白色；
颜色：#2251a4；
字体系列：SegoeBold、Helvetica、Arial；
字号：26px；
线高：34px；
裕度：0 10px 0；
文本对齐：居中；
}

这里是固定版本，我希望资源成为边界的一部分。因此，资源标题将打破边框，但将居中。不，我希望所有内容都位于标题框的边框内，但标题（资源）除外。我希望标题（资源）打断顶部边框，我希望它居中，并在左右两侧有一些填充。