Html CSS定位-左浮动和居中问题_Html_Css

Html CSS定位-左浮动和居中问题

html css

Html CSS定位-左浮动和居中问题,html,css,Html,Css,我相信这对于那些经常使用HTML和CSS的人来说是一个基本的问题我有两段文本，它们都需要出现在同一行上-一段需要左对齐，另一段需要居中，不管左对齐块中有多少文本（显然，左对齐文本的长度不会超过中间标记）为了便于理解和测试，我提供了一个示例。在我的示例中，我有我所需要的，但是在两行上，而不是在同一行上如果您找到解决方案，请重新发布工作样本谢谢 <html> <head> <title>Alignment Test</title>

我相信这对于那些经常使用HTML和CSS的人来说是一个基本的问题

我有两段文本，它们都需要出现在同一行上-一段需要左对齐，另一段需要居中，不管左对齐块中有多少文本（显然，左对齐文本的长度不会超过中间标记）

为了便于理解和测试，我提供了一个示例。在我的示例中，我有我所需要的，但是在两行上，而不是在同一行上

如果您找到解决方案，请重新发布工作样本

谢谢

<html>
<head>
    <title>Alignment Test</title>
    <style>
        body {background-color: #E6E6E6;}
        #reference {width: 100%;
                    border: solid 1px navy;}
        #half1 {width: 50%;
                text-align: right;
                border-right: dotted 1px navy}
        #container {width: 100%;
                    text-align: center;
                    border: solid 1px navy;}
        #floatLeft {float:left;
                    border: dotted 1px green;
                    background-color: #D0F5A9;}
        #centered {width: 100%;
                      border: dotted 1px red;
                      background-color: #F5F6CE;}
    </style>
</head>
<body>
    <div id="reference">
        <div id="half1">Middle of container -->&nbsp;</div>
        <div id="half2"></div>
    </div>
    <div id="container">
        <div id="centered">This text should be centered
            <div id="floatLeft">This text should be left aligned</div>
        </div>
    </div>
</body>


校准试验
正文{背景色：#e6；}
#参考{宽度：100%；
边界：坚固的1px海军；}
#半宽度：50%；
文本对齐：右对齐；
右图边界：虚线1px海军}
#容器{宽度：100%；
文本对齐：居中；
边界：坚固的1px海军；}
#floatLeft{float:left；
边框：点状1px绿色；
背景色：#D0F5A9；}
#中心{宽度：100%；
边框：点着1px红色；
背景色：#F5F6CE；}
容器中间-->
这篇文章应该居中
此文本应左对齐


居中的
左边

Y.肖厄姆的解决方案有效。还有一种方法可以更优雅地包装内容（不允许中间部分和左边部分重叠），但需要更改标记中项目的顺序：

<div style="text-align: center; overflow: auto;">
  <div style="float: left; text-align: left;">left</div>
  centered
</div>


左边
居中的

（文本对齐：左可能不会产生任何影响，例如，如果没有指定宽度，并且内部没有任何内容具有固有宽度，如图像）。

这还考虑了文本居中时浮动元素的宽度。。所以居中的文本将在容器div的其余部分居中..这是真的-这正是我试图避免的。也许我没有把问题说清楚，但我希望“居中”文本在容器中保持居中，而不考虑剩余的空间。。。如果你从上面复制我的代码并实现你的解决方案，你会得到一行，但是“居中”文本与上面的行相比不会居中，因为它标记了容器的中间。谢谢你。这给了我我想要的结果。容器的位置必须设置为（相对），此时左侧内容的绝对位置就包含在其中。完美的

<div style="text-align: center; overflow: auto;">
  <div style="float: left; text-align: left;">left</div>
  centered
</div>