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

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”属性的元素移到下一行。将display:inline添加到我的text-align:center的div中只会取消任何居中对齐。

有没有办法实现这个效果？虽然有很多关于居中的信息，但似乎没有回答我想要做的事情。

- NZHammer

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>

- Zoltan Toth