Выровнять второй Span прямо под первым пролетом, который центрируется текст

Question

Я хочу добиться следующего эффекта:

  Some centered quote on screen 
           ~ author 

и когда котировка больше, автор часть всегда должна быть выровнена прямо под ним

  Some longered, maybe even 
     multi-line centered quote on screen 
           ~ author 

В настоящее время у меня есть эта настройка, но я не могу понять, как лучше всего справиться с этим - это CSS.

.align-center-page { 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.quote-container { 
 
    width: 80%; 
 
    text-align: center; 
 
} 
 
.quote-big { 
 
    font-size: 52px; 
 
    font-weight: bold; 
 
    margin-bottom: 0px; 
 
} 
 
.quote-big span { 
 
    margin: 0px; 
 
    clear: both; 
 
} 
 
.quote-author { 
 
    display: block; 
 
    font-size: 14px; 
 
    font-weight: normal; 
 
    font-style: italic; 
 
    margin-top: 0px; 
 
    text-align: right; 
 
} 
 
.quote-author:before { 
 
    content: "~ "; 
 
}

<div class="align-center-page quote-container"> 
 
    <span class="quote-big">@Model.Quote</span> 
 
    <span class="quote-author">@Model.Author</span> 
 
</div>

Answer 1

Вы должны положить text-align:right внутри .quote-container

.quote-container { 
    width: 80%; 
    text-align: right; 
} 

Смотрите этот working пример

Answer 2

Поместите другой оберточной внутри .quote-контейнер, который является дисплей: inline- блок;

<div class="align-center-page quote-container">   
    <div class="display-inline-block"> 
    <span class="quote-big">@Model.Quote</span> 
    <span class="quote-author">@Model.Author</span> 
    </div> 
</div> 

пример здесь: http://codepen.io/anon/pen/gwAJyp