如何居中并证明文本，就像这幅图一样?

I've taken a look at the other questions, but they're all about centering a blog of left aligned justified text. What I'm struggling with is to center the text and also justify it in a given width.

我已经看了其他的问题，但它们都是围绕着左对齐的文本的博客。我所要做的是将文本居中，并在给定的宽度中对其进行解释。

This is my current block of CSS code:

这是我当前的CSS代码块:

#body-container .intro p {
    top: 20px;
    width: 80%;
    margin: 0 auto;
    font-weight: 300;
    font-size: 32px;
    text-align: justify;
}

Any suggestions, thank you very much! :)

有什么建议，非常感谢!:)

3 个解决方案

#1

It's not a real solution, as it seems this is experimental and only works in firefox and explorer:

这并不是一个真正的解决方案，因为它似乎是实验性的，只适用于firefox和explorer:

-moz-text-align-last: center;
text-align-last: center;

See: https://developer.mozilla.org/es/docs/CSS/text-align-last

参见:https://developer.mozilla.org/es/docs/CSS/text-align-last

#2

Sorry for misunderstanding the question in the comments.

很抱歉在评论中误解了这个问题。

Is the content of the paragraph dynamic, or is it fixed?

段落的内容是动态的，还是固定的?

If it's fixed, you could wrap the last line in a span tag.

如果它是固定的，您可以将最后一行包装在span标记中。

span {
    text-align: center;
    display: block;
    width: 100%
}

I've updated the fiddle: http://jsfiddle.net/FuvHt/7

我更新了小提琴:http://jsfiddle.net/fuvht7

#3

The only reliable way to do it right now is to cut the text out as an image.

目前唯一可靠的方法是将文本作为图像进行剪切。

If your site isn't responsive you can throw a <br /> tag in there, wrap a <span> on the last line, and then center align that text.

如果您的站点没有响应，您可以在其中添加一个
标记，在最后一行包装一个，然后将该文本居中对齐。

I'm really looking forward to the text-align-last css property becoming more widely adopted.

我非常期待text-align-last css属性得到更广泛的应用。