Question

我需要把文字集中在一起。我使用了文本对齐中心但下一行居中。我需要它与顶部的线对齐。

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

Answer 1

这样做的一种便宜的方法是将文本包装在你已经做过的元素中，得到最接近的宽度，文本刚刚结束，而不是包裹到其他行，在右边留下一个大空间，而不是使用margin: auto;

Demo

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

Answer 2

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

使盒子的容器宽度为100％。然后，文本在其内部居中，设置宽度为510px。我想这可能就是你要找的东西。

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

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

如何在不使下一行相对于顶行居中的情况下居中文本块？

3 个答案: