對齊第二跨度的文本已居中的文本

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