CSS定位 - 左漂浮和中心问题

StackOverflow https://stackoverflow.com/questions/2146145

  •  23-09-2019
  •  | 
  •  

题

我敢肯定，这对于那些定期在HTML和CSS工作的人来说是一个基本问题。

我有两段文本，都需要出现在同一行上 - 一个需要对齐，而另一个则需要居中，而不管左键块中有多少文本（显然，而当长度长度左对准文本不会在中途标记上延伸）。

为了使这更容易理解和测试，我包括了一个示例。在我的样本中，我有需要的东西，但是在2行而不是同一行。

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

谢谢。

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

有帮助吗？

解决方案 

<div style="text-align:center;position:relative">
    Centered
    <div style="position:absolute;left:0;top:0">Left</div>
</div>

其他提示

Y. Shoham的解决方案起作用。这是另一个，它可以更优雅地处理包装内容（不允许在中心和左图之间重叠），但需要更改标记中项目的顺序： 

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

（这 text-align: left 例如，如果没有指定宽度，并且内部没有任何固有宽度，例如图像。）

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top