7

Currently the text in my blockquotes are centered, but it's creating a problem when there's not a lot of text to quote and the left border ends up too far away from the text.

Example

I'd like the border to always be 5px from the text (usually centered under an image on my blog).

Is there any way to center the entire blockquote, including the left border, so it isn't stuck in one position while the text is the only thing centered?

Current CSS:

blockquote {
    max-width:390px;
    color: #5c4c40;
    text-align: center; 
    border-left: 3px solid #897860; 
    padding-left: 5px;
    margin-left: 40px; 
}
kmxe060
  • 71
  • 1
  • 1
  • 2
  • 1
    Could you profvide a full example at http://jsfiddle.net ? – Reporter Jun 04 '13 at 10:38
  • 1
    Can you include a screenshot or a drawing of what you want? – Aleks G Jun 04 '13 at 10:38
  • @kmxe060: blockquotes are block-level elements and therefor use the available width. If the blockquote has 500px available space, it will expand to 500px width. You could try around with float/display:inline-block. – kleinfreund Jun 04 '13 at 10:41
  • @Pete: It'll stretch to the set max-width then – no matter how many text is inside. – kleinfreund Jun 04 '13 at 10:42

3 Answers3

7

Add width:auto; and display:table

blockquote {
    max-width:390px;
    color: #5c4c40;
    text-align: center; 
    border-left: 3px solid #897860; 
    padding-left: 5px;
    margin:0 auto;
    background:red;
    width:auto;
    display:table
}

DEMO

Sowmya
  • 26,684
  • 21
  • 96
  • 136
  • That worked, @Sowmya, thanks a lot. Only problem is now the border height has expanded. – kmxe060 Jun 04 '13 at 10:46
  • @kmxe060 there might be conflict in your page css. Can you share the page link – Sowmya Jun 04 '13 at 10:54
  • @kmxe060: This appears either to be a padding or line-height issue with conflicting css rules. – kleinfreund Jun 04 '13 at 10:57
  • @kmxe060 that height is because of p tag rendered inside the blockquote. Remove the p tag it wil be fine. – Sowmya Jun 04 '13 at 11:04
  • Ah, I should have noticed that. Thanks. Any ideas on reducing the top & bottom padding? – kmxe060 Jun 04 '13 at 11:05
  • you can reduce the space by adding this class blockquote p{ margin:0; padding:0} – Sowmya Jun 04 '13 at 11:06
  • Unfortunately Tumblr automatically renders the

    and although adding the extra class fixes the spacing problem around the blockquote, it creates another by removing the spacing between paragraphs within the blockquote. If inline-block didn't change the spacing, it would work perfectly. It's starting to look as though I should just leave it as it was and try to avoid quoting small snippets of text.

     – kmxe060 Jun 04 '13 at 11:54
  • Worked but it makes no sense. Why `display: table` props? It even isn't a table. – Douglas Henrique Mar 31 '22 at 17:52
3
<center><blockquote>test test test</blockquote></center>

http://jsfiddle.net/5g0aa3ea/

Rakka Rage
  • 15,941
  • 8
  • 33
  • 45
  • 1
    Not sure about the status of 'center' back when this answer was given, but as of 2018, the 'center' tag is deprecated. Please don't use it. – Chthonic Project Dec 01 '18 at 18:30
0

Working Fiddle: http://jsfiddle.net/KYdnJ/34/

HTML:

<div class="quote">
    <blockquote>some random text</blockquote>
</div>

CSS:

.quote {
    text-align:center;
}

blockquote {
    padding:10px 5px;
    border-left:3px solid #ccc; 
    display:inline-block;
    color:#666;
    background:#eee;
}
seemly
  • 1,090
  • 10
  • 20