将一个元素水平居中并将另一个元素放在其右侧

正如标题所示，我试图将一个元素水平居中，并将另一个元素放在它的右侧，而不将两个元素居中。我只希望两个元素之一居中，而另一个元素位于其右侧（在本例中位于同一行）。

以下是我能得到的最接近的，但是两个元素都居中，而不是仅包含“CENTER”的元素。我希望“CENTER”位于居中，“right”位于其右侧：

<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>

这会导致带有“right”的元素转到下一行。使用 text-align:center 添加 display:inline 到我的 div 只会取消任何居中。

有什么方法可以实现这一点吗？有很多关于以中心为中心的信息，但似乎没有什么可以回答我想要做的事情。

尝试这个 -http://jsfiddle.net/dGSDF/2/ 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>