如何在div的边界内对齐文本标题

Question

I'm trying to put text inside the border of a box on the page. The solution I have kind of works, but the text in the box writes over the header and doesn't scale the way I'd like it to. Is there a better solution?

I've tried a few things like this https://jsbin.com/atupup/edit?html,output but so far have not been successful.

This is the code I landed on:

 <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> 

I'm not sure if I'm doing this correctly, so any help would be appreciated!

Answer 1

Use a <fieldset> with a <legend> , which provides this effect natively and can be styled any way you like:

 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>