css - 我如何正确地将某些文本与其他居中的文本对齐

Question

我希望在页面中间有一个客户推荐报价。引用可能是任意长度，但不跨越两行。然后我想要一个新行，然后是提供推荐信的人的姓名，就在推荐信的下方，但有道理。

<div class="quote">
 "Wow!  Thanks, create customer service."
</div>
<div class="source">
  -- John S. - California
</div> 

款式：

.quote {text-align:center}
.source {text-align:right; padding-right:300px;}

如何对齐源，以便我可以使用任意长度的引号？

Answer 1

这可能会：

HTML：

<blockquote>
    <p>
        <span class="quote">
            "Wow!  Thanks, create customer service."
            <cite>
                 -- John S. - California
            </cite>
        </span> 
    </p>
</blockquote>

CSS：

blockquote {
    text-align: center;
}
.quote {
    position: relative;
}
cite {
     position: absolute;
     right: 0;
     bottom: -25px;
     text-align: right;
}

Answer 2

稍微更改您的标记并将源代码嵌套到引用中。

<div class="quote">
    "Wow!  Thanks, create customer service."
    <div class="source">
         -- John S. - California
    </div> 
</div>

它的CSS：

.quote { 
  display:table;
  text-align: center;
  margin:0 auto;
}

.quote .source {
  text-align:right;
}

这是它的小提琴。

Answer 3

基本上：你不能不使用你的标记太丑陋和hack-y。（有关此类解决方案，请参阅 THiCE 的答案）。

我不推荐这个，但如果你对使用 JavaScript 没问题，那么这相当简单：（下面使用 jQuery，但没有它也可以实现）

$(".quote").each(function() {
    var $this = $(this);
    $this.next().css({"padding-right": ($this.parent().width() - $this.width()) / 2});
});

如果您不想使用 JavaScript 并且不想进行 hack-y，我建议您重新考虑一下您的布局。