如何将某些文本右对齐到其他居中的文本

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

基本上：你不能不用你的标记太丑陋和黑客。 （参见THiCE对这种解决方案的回答）。

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

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

如果您不想使用JavaScript并且不想破解，我建议您重新考虑一下您的布局。