Horizontally center an element and put another element to the right of it

问题

As the title suggests, I am trying to horizontally center an element and put another element to the right of it WITHOUT centering both elements. I only want ONE of the two elements to be centered, while the other one is to the right of it (and on the same line in this case).

The following is the closest that I can get, but BOTH elements are centered as opposed to just the element containing 'CENTER'. I want 'CENTER' to be centered and 'right' to be to the right of it:

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

I have also tried:

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

which causes the element with 'right' to go to the next line. Adding display:inline to my div with text-align:center just takes away any centering.

Are there any ways to make this happen? There's plenty of information about centering out there, but nothing seems to answer what I am trying to do.

回答1:

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

来源：https://stackoverflow.com/questions/11478931/horizontally-center-an-element-and-put-another-element-to-the-right-of-it