Question

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

问题是左对齐文本将居中文本偏离中心。有什么方法可以避免这种情况吗？

Answer 1

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

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

Answer 2

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

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完全放在一行：“我需要在同一行上同时包含居中文本和左对齐文本 <”。“ / em>的

任何长于一行的东西，它需要点到div的末尾才能换行。要在窗口边缘之前到达div的末尾，div必须具有指定的宽度。

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

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

3 个答案: