如果没有固定的宽度，请将一个居中对齐的块与右对齐文本放在div

Question

似乎所有解决方案都采用固定宽度，这在尝试建立响应式网站时非常糟糕。

我在div中有一块文本。块本身应该以div为中心。这可以通过text-align: center;来实现。但我希望块内的文本是右对齐的。

以下是原始代码段：

<div>
    <h3 class="quote-text">My awesome quote goes here.</h3>
    <h4 class="quote-author">– Me, Myself and ADTC</h4>
</div>

当前结果：

预期结果：

我尝试将文本块放在父span中，添加margin: auto，只添加text-align: right等等。到目前为止没有任何效果。

我不想要任何强制我修复宽度的解决方案，因为我正在构建一个流畅的布局。将JavaScript破解为“更新”是非常可怕的。窗口上的固定宽度调整大小。

顺便说一句，值得注意的是，上面显示的div是inside一个Bootstrap列作为列内容。在屏幕截图中，填充文本位于同一列中，位于div。

之前

Answer 1

试试这个：

<强> CSS

div {
  text-align: center;
}

h3 {
  display: inline-block;
  white-space: nowrap;
  text-align: right;
}  

.intro {
  display: block;
}

<强> HTML

<div>
  <h3 class="quote-text">My awesome quote goes here.<span class="intro">– Me, Myself and ADTC</span></h3>   
</div>

DEMO HERE