我正在尝试创建一个带有标题的“部分”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 提供固定宽度,右侧元素将出现在父级之外。
最佳答案
添加/编辑以下内容
.section.blue {
position:relative;
}
.sectionButtonIcon {
position:absolute;
right:0px;
}
关于html - 在忽略 float 元素的同时在父级中居中 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22041042/