html - 居中整个块引用

Question

目前，我的块引用中的文本居中，但是当没有太多要引用的文本并且左边框最终离文本太远时，就会产生问题。

例子

我希望边框始终距离文本 5 像素（通常在我博客上的图像下方居中）。

有没有办法使整个块引用居中，包括左边框，所以它不会卡在一个位置，而文本是唯一居中的东西？

当前的 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;
}