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.
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;
}3 Answers
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
}<center><blockquote>test test test</blockquote></center>Working Fiddle:
HTML:
<div> <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;
}
