View Full Version : Centering blockquotes


ghostyjack
03-21-2010, 07:19 AM
Does anyone know how to centre a blockquote?

I'm trying to get some text that is centred in the horizontal alignment but still have the text aligned to the left or the right.

This would be most useful for me when I've got a quote and also who quoted it with the author of the quote to the right.

Example

p.right {text-align: right;}
blockquote {width: 60%;}

<blockquote>"This is a test quote, not actually written by anyone. So I'd thought I'd use it for this example"
<p class="right">-the author.</p>
</blockquote>

The above example allows me to be able to adjust the width to align the author to the end of the text and not the edge of the screen but the blockquote is on the left.

How do I move the blockquote so it is centred?

pietvo
03-21-2010, 08:16 AM
This would center the whole blockquote with respect to its environment:
blockquote {margin: 0 auto; width: 60%;}
It is said that Internet Explorer has troubles with this, but that might be solved by putting a div around it with
text-align: center

Jellby
03-21-2010, 10:34 AM
Why not this?

blockquote: { margin: 0 20%; }

(or add some vertical margin instead of the 0)

pietvo
03-21-2010, 05:05 PM
Of course it will do the same. But the other one is usually more logical with respect to style. For example when you are interested in specifying the width of the box in the first place and not so much in the exact size of the margins. Also when you want to give the size of the boxquote in absolute amounts (pixels, cm, inches) you have to use that form. So I would in general call the last for a premature optimization.

ghostyjack
03-25-2010, 06:16 AM
Thanks guys, these tips have helped solve my problem.