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

Question

I want to have a customer testimonial quote centered in the middle of a page. The quote might be arbitrary length, but doesn't span two lines. Then I want a new line and then the name of the person that provided the testimonial, just under the testimonial but right justified.

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

Styles:

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

How do I align the source so that I works for arbitrary length of quotes?

Answer 1

This will do, probably:

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

Change your markup a bit and nest the source into the quote.

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

The CSS for it:

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

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

Here is the fiddle for it.

Answer 3

Basically: you can't without going too ugly and hack-y with your markup. (See THiCE's answer for such a solution).

I do not recommend this, but if you're okay with using JavaScript, then this is fairly simple: (below uses jQuery, but can be achieved without it)

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

If you don't want to use JavaScript and don't want to go hack-y, I suggest you rethink your layout just a bit.