水平居中一個元素，並在其右側放置另一個元素

Question

正如標題所示，我試圖水平居中一個元素並將另一個元素放在其右側而不居中對齊兩個元素。我只想要兩個元素中的一個居中，而另一個在右邊（在這種情況下在同一行上）。

以下是我可以得到的最接近的，但是兩個元素都是居中的，而不僅僅是包含'CENTER'的元素。我希望「中心」爲中心和「權利」是它的右：

<div style="text-align:center;"> 
    <div style="display:inline">CENTER</div> 
    <div style="display:inline">right</div> 
</div> 

我也有嘗試：

<div style="text-align:center;"> 
    <div style="display:inline">CENTER</div> 
</div> 
<div style="display:inline">right</div> 

這將導致元素與「正確」去下一行。添加顯示：通過文本對齊方式將內聯內聯到我的div：中心只消除任何居中。

有沒有什麼辦法可以做到這一點？有很多關於中心化的信息，但似乎沒有回答我想要做的事情。

Answer 1

試試這個 - http://jsfiddle.net/dGSDF/2/

#center { 
 
    position: relative; 
 
    height: 100px; 
 
    width: 60%; 
 
    margin: auto; 
 
    background: beige; 
 
} 
 

 
#right { 
 
    position: absolute; 
 
    right: -20%; 
 
    /* the div's width */ 
 
    top: 0; 
 
    width: 20%; 
 
    background: orange; 
 
    height: 100px; 
 
}

<div id="center"> 
 
    CENTER 
 
    <div id="right">right</div> 
 
</div>