Как выровнять текстовый заголовок внутри границы div

Question

Я пытаюсь поместить текст в рамку рамки на странице. Решение у меня вроде работает, но текст в поле пишет поверх заголовка и не масштабируется так, как мне бы хотелось. Есть ли лучшее решение?

Я пробовал несколько вещей, подобных этой https://jsbin.com/atupup/edit?html,output, но пока не увенчался успехом.

Это код, на который я приземлился:

<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
    <span style="font-size: 40px; background-color: white; padding: 0 10px;">
    Section Title <!--Padding is optional-->
    </span>
</div>
<div style="border: 1px solid black; padding:none;">
    <p>more content here</p>
</div>

<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
    <span style="font-size: 40px; background-color: white; padding: 0 10px;">
 
    Section Title <!--Padding is optional-->
</span>
</div>
<div style="border: 1px solid black; padding:none;">
    <p>more content here</p>
</div>

Я не уверен, правильно ли я это делаю, поэтому любая помощь будет признательна!

Answer 1

Используйте <fieldset> с <legend>, который обеспечивает этот эффект изначально и может быть стилизован так, как вам нравится:

fieldset {
  background-color:rgba(100,50,175,.2);
  border-top:3px solid black;
}

legend {
  text-align:center;
  font-size:3em;
  font-weight:bold;
  background-color:rgba(100,100,255,.5);
  padding:10px;
  border:3px dashed #e0e0e0;
}

<fieldset>
  <legend>This is the title</legend>
  
  Other content here   Other content here   Other content here   Other content here   Other content here   Other content here   Other content here   Other content here   Other content here   Other content here   Other content here   Other content here   Other content here   Other content here   Other content here 
  
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>    
  </ul>
  
  <p>Just about any HTML can go in here</p>
</fieldset>