3

我正在尝试设置我的块引用的样式，以便将它们从常规文本中删除，并使用不同的颜色背景。我发现让它们从常规文本中脱颖而出的最好方法是使用float:right，但是，我不希望将块引用强制到段落的右侧（理想情况下，我希望它居中）。我如何实现这种效果？

需要明确的是，我希望块引用中的文本保持左对齐。块引用的整个形式是我想要居中的。

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>
4

3 回答 3

2

与其浮动它，为什么不将 .blockquote 设置为display: block并删除浮动？然后，您可以只使用边距/填充将其放在您想要的位置，而不必担心内容会根据您调整大小*。

*很多。

于 2013-02-27T22:35:26.180 回答
2

将跨度更改为 div。然后删除float：right，并添加margin：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;
}
于 2013-02-27T22:35:43.137 回答
0

也许这就是你想要的：

我还添加了text-align: right以防万一，因为您提到您希望文本向右移动，而不是整个容器/黑引号。

编辑我忘记了你float: right在那里，所以这是另一个没有它的更新：

于 2013-02-27T22:35:13.797 回答