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

Question

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

以下是我能得到的最接近的，但两个元素都居中，而不仅仅是包含“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 只会消除任何居中。

有什么方法可以做到这一点？那里有很多关于居中的信息，但似乎没有什么能回答我正在尝试做的事情。

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>