I am attempting to generate a 'section' division with a header. The goal is for this header to have a centered title and the possibility of including a jquery UI button on its right side. The width of the 'section' division will be determined by its containing element.
My issue lies in achieving proper center alignment of the title when there is also a button present.
HTML:
<div style="width: 600px;">
<div class="section purple">
<div class="sectionHeader">
<div>Normal Title</div>
</div>
<div class="sectionContent"></div>
</div>
<div class="section blue">
<div class="sectionButtonIcon"> <a id="btnExample">Jquery UI Button</a>
</div>
<div class="sectionHeader">
<div>Title With Button</div>
</div>
<div class="sectionContent"></div>
</div>
</div>
Check jsFiddle for css styling: http://jsfiddle.net/agAgeas50/uL9Uc/8/
Please note: This query is distinct from Center inline-block div in parent while ignoring floating elements. In that post's jsfiddles, if you wrap the parent in another container with a fixed width, the right-hand element extends beyond the parent.