水平居中放置一个元素，然后将另一个元素放在它的右边 [英] 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).

以下是我所能获得的最接近的结果，但是两个元素都居中，而不是仅包含"CENTER"的元素.我希望"CENTER"位于居中位置，"right"位于其右侧:

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>

我也尝试过:

<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中，只会使居中消失.

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.

推荐答案

尝试一下- 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>

这篇关于水平居中放置一个元素，然后将另一个元素放在它的右边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！