居中整个块引用[重复]

Posted 2023-03-04

【中文标题】居中整个块引用[重复]

【英文标题】：Center entire blockquote [duplicate]

【发布时间】：2013-05-30 17:18:14

【问题描述】：

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

Example

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

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

当前的 CSS：

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

【问题讨论】：

你能附上你想要的截图或绘图吗？

你能在jsfiddle.net提供一个完整的例子吗？

@kmxe060：块引用是块级元素，因此使用可用宽度。如果 blockquote 有 500px 的可用空间，它将扩展到 500px 宽度。您可以尝试使用 float/display:inline-block。

@Pete：无论里面有多少文本，它都会拉伸到设置的最大宽度。

【参考方案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

DEMO

【讨论】：

成功了，@Sowmya，非常感谢。唯一的问题是现在边框高度扩大了。

@kmxe060 您的页面 css 可能存在冲突。可以分享一下页面链接吗

@kmxe060：这似乎是与 css 规则冲突的填充或行高问题。

@kmxe060 高度是因为在块引用内呈现的 p 标签。去掉 p 标签就可以了。

啊，我应该注意到了。谢谢。关于减少顶部和底部填充的任何想法？

【参考方案2】：

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

http://jsfiddle.net/5g0aa3ea/

【讨论】：

在给出此答案时不确定“中心”的状态，但截至 2018 年，“中心”标签已被弃用。请不要使用它。

【参考方案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;

【讨论】：

谢谢@seemly。有效，但给我的高度问题与之前的代码相同。