html – 在父级中居div而忽略浮动元素

概述我正在尝试创建一个带有标题的“section”div,此标题有一个居中的标题,右侧可能有也可能没有 jquery UI按钮. ‘section’div的宽度由其父级确定. 我的麻烦是按钮中心对齐的标题考虑了按钮的宽度. HTML： <div style="width: 600px;"> <div class="section purple"> <div class="sec 我正在尝试创建一个带有标题的“section”div,此标题有一个居中的标题,右侧可能有也可能没有 jquery UI按钮. ‘section’div的宽度由其父级确定.

我的麻烦是按钮中心对齐的标题考虑了按钮的宽度.

HTML：

<div >    <div >        <div >            <div>normal Title</div>        </div>        <div ></div>    </div>    <div >        <div > <a ID="btnExample">Jquery UI button</a>        </div>        <div >            <div>Title With button</div>        </div>        <div ></div>    </div></div>

有关CSS：http://jsfiddle.net/agAgeas50/uL9Uc/8/,请参阅Jsfiddle

注意：这不是Center inline-block div in parent while ignoring floating elements的副本.如果你在接受的答案中查看Jsfiddle,将父级包装在另一个div中并给顶级div一个固定宽度,右手元素出现在父级之外.

解决方法 添加/编辑以下内容

.section.blue {   position:relative;}.sectionbuttonIcon {     position:absolute;    right:0px;}

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

@H_502_38@ 总结

以上是内存溢出为你收集整理的html – 在父级中居div而忽略浮动元素全部内容，希望文章能够帮你解决html – 在父级中居div而忽略浮动元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。