我正在尝试使用标题创建一个'section'div,此标题有一个居中的标题,右侧可能有也可能没有jquery UI按钮。 'section'div的宽度由其父级确定。
我的麻烦在于按钮中心对齐的标题是考虑按钮的宽度。
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>
请参阅jsFiddle了解css:http://jsfiddle.net/agAgeas50/uL9Uc/8/
注意:这不是Center inline-block div in parent while ignoring floating elements的副本。如果你在接受的答案中查看jsfiddle,将父级包装在另一个div中,并给顶级div一个固定的宽度,右手元素出现在父级之外。
答案 0 :(得分:1)
添加/编辑以下内容
.section.blue {
position:relative;
}
.sectionButtonIcon {
position:absolute;
right:0px;
}