1

我需要使文本居中。我使用了 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/

4

3 回答 3

1

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

演示

.text {
    width: 490px;
    margin: 0 auto;
}
于 2013-05-14T17:00:47.750 回答
1

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

将盒子设为容器的 100% 宽度。然后文本以 510 像素的宽度在其中居中。我想这可能是你正在寻找的。

.box {
    width: 100%;
}
.text {
    margin: 0 auto;
    width: 510px;
}
于 2013-05-14T17:51:14.850 回答
1

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

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

于 2013-05-14T18:49:32.613 回答