Html 把东西放在左边，然后在它旁边居中

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

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

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

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

所以我想让一些东西向左浮动，居中浮动，但是“文本向左”将居中文本向右推。 我试了两样东西，都是用小提琴

左文本；
居中文本

另一次尝试：

居中文本
文本左

第一个显然不好。第二，我无法对齐div中的文本，它将转到另一个文本，而不是换行符

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

左文本
居中文本

---

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

Set

left:0；右：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>


左文本；
居中文本

另一次尝试：

居中文本
文本左

设置
左侧：0；右：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>


左文本；
居中文本

另一次尝试：

居中文本
文本左

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


只需给容器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>


左文本
居中文本
以下是另一个可能适合您的解决方案：


只需给容器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>


左文本
居中文本
您可以将父div
位置：相对
和中心div设置为
位置：绝对

html:

这样做的问题是，如果左div太长，它将穿过中心div。但是您可以给左div一个
宽度
，这样它就不会穿过中心div。
您可以将父div
位置：相对
和中心div设置为
位置：绝对

html:

问题是，如果左div太长，它将穿过中心div。但是您可以给左div一个
宽度
，这样它就不会穿过中心div。
我可能没有给出足够的说明。这就是我想要的：



左文本
居中文本

绿色栏是不需要的，它只是一个“助手”。
当然，任何列都没有宽度，它们应该和内容一样宽
我可能没有给出足够的说明。这就是我想要的：



左文本
居中文本

绿色栏是不需要的，它只是一个“助手”。
当然，任何列都没有宽度，它们应该与内容一样宽
是的，对，但是如果缩小区域，仍然不会导致换行，文本会覆盖另一列。我不认为用“position:absolute”的方法可以解决这个问题是的，对，但是如果你缩小区域，它仍然不会导致换行，文本会覆盖另一个。我不认为用“position:absolute”可以解决这个问题。好吧，这可能是解决方案，但是仍然没有换行符。你必须给左div一个宽度，如果它们是图像？所以，没有宽度，在同一条线上展开？你想做什么？好吧，这可能是解决方案，但仍然没有换行符你必须给左div一个宽度，如果它们是图像？所以，没有宽度，在同一条线上展开？你想做什么？
<div class="parent">
    <div class="left">left text</div>
    <div class="center">centered text</div>
</div>

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

.left{
    float: left;
}

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

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