Question

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

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

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

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

所以我想要一些漂浮在左边和中心的东西，但是“左边的文字”会向右推中心文本。我尝试了两件事，都在小提琴中

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>

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

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

Answer 2

以下是另一种可能适合您的解决方案：

<强> Fiddle Demo

您只需给出容器div text-align: center并将剩下的另一个div浮动。由于容器是宽度的100％而文本是内联的，因此它将自动居中。

HTML / CSS：

<div style="width: 100%;text-align: center; background-color: yellow;">
    <div style="float: left;">left text</div>
    centered text
</div>

Answer 3

您可以将父div position: relative和中心div设为position: absolute。 http://jsfiddle.net/MeGZ6/4/

HTML：

<div class="parent">
    <div class="left">left text</div>
    <div class="center">centered text</div>
</div>

的CSS：

.parent{
    width: 50%;
    position: relative;
    float: left;
    background: red;
}

.left{
    float: left;
}

.center{
    position: absolute;
    width: 100%;
    text-align: center;
}

这个问题是，如果左边的div太长，它将越过中心div。但是你可以给左边的div width，这样它就不会越过中心div。

Answer 4

我可能没有给出足够的指示。这就是我想要的：

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>

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

漂浮一些东西，并在它旁边居中

4 个答案: