html - 向左浮动一些东西，然后在它旁边居中

Question

也许这是一个非常愚蠢的问题，但我真的不知道。我想实现以下目标

-----------------------------------------
| TEXT LEFT   CENTERED TEXT             |
-----------------------------------------

----------------------------------------------------------------------------------
| TEXT LEFT                        CENTERED TEXT                                 |
----------------------------------------------------------------------------------

-------------------------------
| TEXT   CENTERED TEXT        |
| LEFT                        |
-------------------------------

所以我想让一些东西向左浮动，然后居中，但是“文本向左”将居中文本向右推了一点。我尝试了两件事，都在 fiddle 中

http://jsfiddle.net/MeGZ6/

<div style="text-align: center; width: 50%; background-color: red;">
<div style="float: left;">left text;</div>
    centered text
</div>
<hr>
    another attempt:
<hr>
<div style="width: 50%; background-color: yellow;">
    <div style="position: absolute; text-align: center;">centered text</div>
text left
</div>

第一个显然不行。第二，我无法对齐 div 内的文本，它会继续显示在其他文本上，而不是换行。

编辑:这就是我想要实现的目标:

http://jsfiddle.net/saLaP/

<table style="background-color: red;" width="100%">
    <tr>
        <td width="20%" style="background-color: yellow;">left text</td>
        <td width="60%" style="text-align: center;">centered text</td>
        <td width="20%" style="background-color: green;"></td>
    </tr>
</table>

不需要绿色列，它只是一个“ helper ”。当然，任何列都没有宽度，它们应该与其内容一样宽

Answer 1

设置left:0;right:0;为绝对定位的div

<div style="text-align: center; width: 50%; background-color: red;">
<div style="float: left;">left text;</div>
    centered text
</div>
<hr>
    another attempt:
<hr>
<div style="width: 50%; background-color: yellow;">
    <div style="position: absolute; text-align: center;left:0;right:0;">centered text</div>
text left
</div>

Fiddle Demo