html - ブロック引用全体を中央揃え

Question

現在、ブロック引用のテキストは中央に配置されていますが、引用するテキストが多くなく、左の境界線がテキストから離れすぎている場合に問題が発生します。

例

境界線は常にテキストから 5px 離したいです (通常、ブログの画像の下の中央に配置します)。

左の境界線を含むブロック引用全体を中央に配置する方法はありますか?そのため、テキストが中央に配置されているだけで、1 つの位置に固執することはありませんか?

現在の CSS:

blockquote {
    max-width:390px;
    color: #5c4c40;
    text-align: center; 
    border-left: 3px solid #897860; 
    padding-left: 5px;
    margin-left: 40px; 
}

Answer 1

追加 width:auto;して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
}

デモ

Answer 2

<center><blockquote>test test test</blockquote></center>

http://jsfiddle.net/5g0aa3ea/

Answer 3

作業フィドル: 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;
}