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

Question

正如标题所暗示的那样，我试图将一个元素水平居中，并将另一个元素放在它的右边，而不是将两个元素居中。我只想要将两个元素中的一个放在中心，而另一个放在它的右边（在这种情况下在同一条线上）。

以下是我能得到的最接近的，但是两个元素都是居中的，而不是只包含'CENTER'的元素。我希望'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>

这会导致带有'right'的元素转到下一行。添加显示：内联到我的div与text-align：center只会消除任何居中。

有没有办法让这种情况发生？有很多关于居中的信息，但似乎没有什么能回答我想要做的事情。

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>