Demo jsBin link .fieldset { border: 1px solid #ddd; margin-top: 1em; width: 500px; } .fieldset h1 { font-size: 12px; text-align: center; } .fieldset h1 span { display: inline; border: 1px solid #ddd; background: #fff; padding: 5px 10px; position: relative; top: -1.3em; } <div class=”fieldset”> <h1><span>Title</span></h1> <p>Content</p> </div>
Update (25 Sept 2017) The Firefox bug described below is fixed as of Firefox 53 and the link to this answer has finally been removed from Bootstrap’s documentation. Also, my sincere apologies to the Mozilla contributors who had to block removing support for -moz-document partly due to this answer. The fix In WebKit and Firefox … Read more
Apparently <fieldset> elements are supposed to generate block formatting contexts for their contents: The fieldset element is expected to establish a new block formatting context. That’s why floated elements don’t float out of them. I would guess that this has to do with the nature of fieldsets as visual form control groups. There could be … Read more
See: http://jsfiddle.net/thirtydot/jm4VQ/ If the text needs to wrap, this won’t work. In IE7, there will be no line. HTML: <h2><span>Centered Header Text</span></h2> CSS: h2 { text-align: center; display: table; width: 100%; } h2 > span, h2:before, h2:after { display: table-cell; } h2:before, h2:after { background: url(http://dummyimage.com/2×1/f0f/fff&text=+) repeat-x center; width: 50%; content: ‘ ‘; } h2 … Read more