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

时间:2014-02-07 23:47:00

标签: html css

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

-----------------------------------------
| 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>

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

4 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

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

<强> 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>

答案 2 :(得分:1)

您可以将父div position: relative和中心div设为position: absolutehttp://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。

答案 3 :(得分:0)

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

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>

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