css - 在同一行左对齐和居中文本

Question

我有一个div我需要在同一行上同时拥有居中文本和左对齐文本。这个 jsfiddle 演示了我到目前为止所拥有的：http: //jsfiddle.net/nDqvT/

问题是左对齐的文本将居中的文本推离中心。有没有办法避免这种情况？

Answer 1

这个对吗 ？ http://jsfiddle.net/nDqvT/36/

Answer 2

如果可以为左侧文本指定宽度，则可以为居中文本指定偏移边距。

http://jsfiddle.net/nDqvT/1/

Answer 3

干得好。

http://jsfiddle.net/nDqvT/57/

换行符<br />用于确保包装器div具有高度。没有它，包装器在内容流中看起来是空的。代替<br />，您可以使用 或只为包装器指定高度。

<div id="wrapper">
    <div id="left">Left Left Left Left Left Left Left Left</div>
    <div id="centered">Centered</div>
    <br/>
</div>

 

#wrapper {
    position: relative;
    display: block;
    width: 100%;
}
#left { 
    position: absolute;
    text-align: left;
    top: 0;
    left:0;
}
#centered {
    position: absolute;
    text-align: center;
    width: 100%;
    top: 0;
    left: 0;
}

编辑：

整个解决方案假定文本将根据 OP 全部放在一行上： “我需要在同一行上同时放置居中文本和左对齐文本。”

任何超过一行的内容都需要到达末尾div才能换行。要到达div窗口边缘之前的末尾，div必须具有指定的宽度。

OP 不希望div's 具有指定的宽度，也不希望文本相互重叠。因此，似乎 OP 的各种约束相互冲突，从而排除了理想的解决方案。