html - 右对齐文本居中的第二行

Question

抱歉，如果标题不是很清楚，但我正在尝试找出如何使用 CSS 解决以下问题。

我有一个文本应该显示在不同的两行中:假设第一行是“hello world”，第二行是“goodbye”

我需要以这种方式在屏幕的中心显示文本:

hello world
    goodbye

我将其用作第一次尝试，但我得到的只是两条线都居中。我需要让第二行右对齐。

div#logo {
    clear: both;
    padding: 1em;
    border: 0;
    margin: 1em auto;
    text-align: center;
    width: 75%;
}

谢谢。

Answer 1

最简单的解决方案:将您的段落右对齐并将 max-width 设置为第一行的宽度，第二行将自动换行并右对齐。

html

<div id="logo">
    <p>Hello World goodbye!</p>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

#logo
{
    display:block;
    width:100px;
    position:relative;
    margin-left:auto;
    margin-right:auto;
}
#logo p
{
    max-width:80px;
    text-align:right;
}

这是一个功能 fiddle