4

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

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

这导致具有“正确”的元素转到下一行。使用 text-align:center 将 display:inline 添加到我的 div 只会消除任何居中。

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

4

1 回答 1

4

试试这个 - 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>

于 2012-07-13T22:08:40.093 回答