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

Code:

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:

Code:

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

Code:

text-align: center

Jellby · 03-21-2010, 10:34 AM

Why not this?

Code:

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.

FunkeXMix · 07-17-2014, 05:36 AM

This unfortunately does not work in ADE based readers like Bluefire and Adobe Digital Editions. The blockquote will still not be centered.

Jellby · 07-17-2014, 06:07 AM

What does not work? As far as I know, "width: 60%; margin: 0 20%;" should work. The variant with auto ("width: 60%; margin: 0 auto;") apparently works in the latest Adobe engine.

03-21-2010, 07:19 AM	#1
ghostyjack Guru Posts: 718 Karma: 1085610 Join Date: Mar 2009 Location: Bristol, England Device: PRS-T1, 1825PT, Galaxy Tab, One X, TF700T, Aura HD, Nexus 7	Centering blockquotes 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 Code: 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?

03-21-2010, 08:16 AM	#2
pietvo Reader Posts: 519 Karma: 24612 Join Date: Aug 2009 Location: Utrecht, NL Device: Kobo Aura 2, iPhone, iPad	This would center the whole blockquote with respect to its environment: Code: 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 Code: text-align: center

03-21-2010, 10:34 AM	#3
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Why not this? Code: blockquote: { margin: 0 20%; } (or add some vertical margin instead of the 0)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Centering PDF	nguirado	Amazon Kindle	5	10-04-2010 08:45 PM
How to do centering	sjohnson717	Calibre	15	02-28-2010 09:20 AM
ebook publisher & blockquotes	Chauncey	IMP	5	02-10-2010 10:43 AM
centering images with css override?	Amalthia	Calibre	2	03-30-2009 01:53 PM
Bookdesigner - Centering Title Author...	davers	Workshop	7	01-12-2009 04:21 PM

03-21-2010, 05:05 PM	#4
pietvo Reader Posts: 519 Karma: 24612 Join Date: Aug 2009 Location: Utrecht, NL Device: Kobo Aura 2, iPhone, iPad	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.

03-25-2010, 06:16 AM	#5
ghostyjack Guru Posts: 718 Karma: 1085610 Join Date: Mar 2009 Location: Bristol, England Device: PRS-T1, 1825PT, Galaxy Tab, One X, TF700T, Aura HD, Nexus 7	Thanks guys, these tips have helped solve my problem.

07-17-2014, 05:36 AM	#6
FunkeXMix Enthusiast Posts: 48 Karma: 10 Join Date: Aug 2011 Device: Ipad	This unfortunately does not work in ADE based readers like Bluefire and Adobe Digital Editions. The blockquote will still not be centered.

07-17-2014, 06:07 AM	#7
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	What does not work? As far as I know, "width: 60%; margin: 0 20%;" should work. The variant with auto ("width: 60%; margin: 0 auto;") apparently works in the latest Adobe engine.

Advert

Advert