居中忽略浮動元素的中心div

我想創建一個'節'的div與頭，這個頭有一個居中的標題，並可能或可能沒有在其右側的jQuery UI按鈕。 'section'div的寬度由其父項決定。居中忽略浮動元素的中心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設置固定寬度，右側元素顯示在父級之外。

來源

2014-02-26 alpha1python

添加/編輯下面

.section.blue { 
    position:relative; 
} 

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

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

來源

2014-02-26 12:24:29 caramba

注意的是，雖然該解決方案將在一些屏幕/容器寬度的工作，它會導致按鈕覆蓋在較小的寬度稱號。 – Kzqai

完美！謝謝！ – alpha1python

@Kzqai no最外層容器上有給定的寬度。但如果標題變大，該按鈕將重疊。 – caramba

居中忽略浮動元素的中心div

回答

相關問題