如何使文本块居中而不使下一行相对于顶行居中？答案

【问题标题】：How can I center the block of text without the next line being centered relative to the top line?如何使文本块居中而不使下一行相对于顶行居中？
【发布时间】：2013-05-15 02:49:32
【问题描述】：

我需要使文本居中。我使用了 text-align center 但下一行居中。我需要它与顶部的线对齐。

<div class="box">
<div class="text">Some text.Some text.Some text.Some text.Some text.Some text.Some text.
    Some text.Some text.Some text.Some text.Some text.</div>
</div>

如何使文本块居中而不使下一行相对于顶行居中？

http://jsfiddle.net/heQ9H/

【问题讨论】：

为什么不将文本分成两个不同的 div 并为 'text-align' 分配不同的值？
如果你想要的第二行应该从左边开始，那么文本是“对齐中心”吗？
@kat_indo 文字数量不一致。有时很多，有时只是几句话。
@mr.alien 这就是我想知道的。有没有办法让文本块居中，同时让其他行在对齐方面跟随第一行。

标签： css alignment center

【解决方案1】：

一种廉价的方法是将文本包装在您已经做过的元素中，获得最接近的宽度，您的文本刚刚完美结束，而不是换行到另一行，在右侧留下大空间，并且而不是使用margin: auto;

Demo

.text {
    width: 490px;
    margin: 0 auto;
}

【讨论】：

【解决方案2】：

示例：http://jsfiddle.net/heQ9H/2/

使框的宽度达到其容器的 100%。然后文本以 510 像素的宽度在其中居中。我想这可能就是你要找的。p>

.box {
    width: 100%;
}
.text {
    margin: 0 auto;
    width: 510px;
}

【讨论】：

【解决方案3】：

在最简单的示例中，您只需要以下内容：

.box {
    width: 510px;
    background-color: red;
    margin: 0 auto;
}
.text {
    color: #fff;
    font-size: 15px;
}

您有一个固定宽度的块容器 (.box)，并通过应用 margin: 0 auto 使其相对于其父容器居中。

根据其他格式需求（例如，多个背景图像或特殊 JavaScript 操作的挂钩），可能不需要 .text 元素。

小提琴：http://jsfiddle.net/audetwebdesign/heQ9H/3/

【讨论】：