当前位置：文江博客话题详情

左对齐并将文本居中在同一行

发布于 2024-11-28 14:24:19 字数 205 浏览 1 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

脸赞 2024-12-05 14:24:19

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

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

回复收藏 0 原文

又爬满兰若 2024-12-05 14:24:19

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

回复收藏 0 原文

失而复得 2024-12-05 14:24:19

干得好。

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

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

<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全部放在一行上：“我需要将居中文本和左对齐文本放在同一行< /strong>."

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

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

Here you go.

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

The line break <br /> is used to ensure that the wrapper div has height. Without it, the wrapper looks empty within the content flow. Instead of <br />, you could use or just assign a height to the wrapper.

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

EDIT:

This entire solution assumes the text will all fit on one line as per the OP: "I need to have both centered text and left-aligned text on the same line."

Anything longer than one line and it needs to hit the end of the div in order for it to wrap. To reach the end of a div before the edge of the window, the div must have a specified width.

The OP does not want the div's to have a specified width nor does he want the texts to overlap each other. Therefore, it seems like the various constraints of the OP are in conflict with each other which precludes an ideal solution.

回复收藏 0 原文

~没有更多了~