造型blockquote - 必須浮動：正確，但想要以blockquote爲中心

Question

我試圖對我的blockquotes進行樣式設置，以便將它們從常規文本中移除，並使用不同的顏色背景。我發現使它們脫離常規文本的最佳方式是使用float:right，但是，我不希望blockquote被強制置於段落的右側（理想情況下，我希望它是居中）。我如何實現這種效果？

要清楚，我希望塊引用內的文本保持左對齊。 blockquote的整個形式就是我想要的中心。

jsfiddle

.blockquote { 
    width: 75%; 
    float: right; 
    margin-top:20px; 
    margin-bottom: 20px; 
    padding: 20px; 
    background: #0fddaf; 
    background: rgb(15, 221, 175); /* Fall-back for browsers that don't support rgba */ 
    background: rgba(15, 221, 175, .15); 
    font-family: fanwood_italic-webfont; 
} 

.blockquote p { 
    padding: 10px 

} 

<span class="blockquote">Being good in business is the most fascinating kind of art. Making money is art and working is art and good business is the best art.</span> 

Answer 1

而是漂浮它的你爲什麼不只需將您的.blockquote設置爲display: block並刪除浮動？然後，您只需使用邊距/填充即可將其放到您想要的位置，而無需擔心調整大小的內容*。

*很多。

Answer 2

也許這是你想要什麼：

• http://jsfiddle.net/ecCCu/1/

我還添加了text-align: right以防萬一，因爲你已經提到你希望文本向右，但不是整個容器/黑引號。

---

編輯我忘了，你必須在那裏float: right，所以這裏沒有它的另一個更新：

• http://jsfiddle.net/ecCCu/2/

Answer 3

將跨度更改爲div。然後刪除float：right，並添加邊距：0 auto;

http://jsfiddle.net/ecCCu/3

<div class="blockquote">Being good in business is the most fascinating kind of art. Making money is art and working is art and good business is the best art.</div> 

.blockquote { 
    width: 75%; 
    margin: 0 auto; 
    margin-top:20px; 
    margin-bottom: 20px; 
    padding: 20px; 
    background: #0fddaf; 
    background: rgb(15, 221, 175); /* Fall-back for browsers that don't support rgba */ 
    background: rgba(15, 221, 175, .15); 
    font-family: fanwood_italic-webfont; 
}