居中文本并将div浮动到右侧

Question

我有一个容器div，其中包含文本，我想让文本居中。我还想在容器中插入一个向右浮动的div，就像这样：

<div id="container" style="text-align:center">
  Text
  <div id="child" style="float:right"></div>
</div>

不幸的是，当子元素存在时，文本不再相对于容器居中，而是向左移动子元素的宽度。

有没有人知道如何使文本居中并同时保持div在右侧的位置？

- TheBoss

---

不会，虽然很少会改变宽度。 - TheBoss

Answer 1

像这样的东西...

<div style='position:relative;'>
  my centered text
  <div style='position:absolute;right:0;top:0'>
    my right div
  </div>
</div>

你显然可以将内联样式放入CSS中。

- anson

---

请记住，“绝对定位”的 div 会覆盖您的“居中”文本，如果居中文本太长。 - anson

太好了。我尝试过这个，但不知道有一个“right”属性！我以为我得使用JavaScript，但对于这么简单的事情来说，这将是一种麻烦。顺便说一下，您的答案可以通过包括top:0;来改进，以便将其与包含div对齐。谢谢！ - TheBoss

Answer 2

可能是这样吗？创建三个相等的部分。左、中、右？

<div id="container">
<div id="child1" style="float:right width: 30px;"></div>
<div id="child2" style="float:right width: 30px; text-align:center;">TEXT</div>
<div id="child3" style="float:right width: 30px;"></div>
</div>

- Zak

---

确实可以这样做，但是否有更简洁的解决方案（不需要额外添加两个 div 元素）？ - TheBoss

您可以将右侧浮动一个，将带有文本的#2向右浮动，忽略#3，只需将container设置为90px的宽度，同时保持其他两个设置为30. - Zak