在父元素中居中显示div，同时忽略浮动元素

Question

我正在尝试创建一个“section” div，它带有标题，该标题具有中心对齐的样式，并且可能具有jquery UI按钮在其右侧。 "section" div的宽度由其父元素决定。

我的问题是标题和按钮的居中对齐是将按钮的宽度考虑在内。

Html：

Title

Button

<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设置固定宽度，右侧元素会出现在父元素外部。

- alpha1python

Answer 1

添加/编辑以下内容。

.section.blue {
   position:relative;
}

.sectionButtonIcon {
     position:absolute;
    right:0px;
}

http://jsfiddle.net/uL9Uc/9/

- caramba

---

请注意，尽管此解决方案适用于某些屏幕/容器宽度，但将会在较小的宽度上导致按钮重叠标题。 - Kzqai

@Kzqai 不，最外层容器有给定的宽度。但是如果标题变得更长，那么按钮将会覆盖其上方。 - caramba

@alpha1python 不客气！如果更大的标题可能会成为问题，请告诉我并提供选项（例如换行或类似方式），我们/你/我可以解决这个问题。 - caramba