居中 <p> 而不设置宽度答案

【问题标题】：centering <p> without setting width居中 <p> 而不设置宽度
【发布时间】：2014-04-25 15:25:24
【问题描述】：

我有一条错误消息要显示如果没有背景，我可以使用 text-align center 将其居中。但现在可以清楚地看到它占据了容器的整个宽度，它是 <p>。

所以我给了宽度和边距：0 auto; 但我不能将它的类赋予所有其他错误消息，因为宽度会发生变化。那么有没有办法在不给宽度的情况下将其居中。

这是我目前拥有的JSFIDDLE

HTML：

<p class="error"><b>Error:</b> Dont select corners, select edges!</p>

CSS：

.error{
    padding:15px;
    border:1px solid #ebccd1;  
    border-radius:4px;  
    background-color: #f2dede;
    margin:0 auto;
    font-family:consolas;
    font-size:17px;  
    color:#a94442;
    width:370px;
}

【问题讨论】：

标签： html css

【解决方案1】：

将p元素的显示更改为inline-block，然后将text-align:center添加到父元素使其居中。

UPDATED EXAMPLE HERE

.parent {
    text-align:center;
}
.error {
    padding:15px;
    border:1px solid #ebccd1;
    border-radius:4px;
    background-color: #f2dede;
    font-family:consolas;
    font-size:17px;
    color:#a94442;
    display:inline-block;
}

或者，您可以将p 元素的显示更改为table 为King King points out。

值得注意的是this approach wouldn't work in IE7 though。

【讨论】：

【解决方案2】：

您可以将display:table 用于p：

.error {
  ...
  display:table;
}

Demo.

【讨论】：

如此简单的答案可以解决所有问题，谁会期望一张桌子可以工作！ :D
@DanielCheung 实际上 CSS 表格布局相当灵活。在很多情况下，只有它才能解决问题（而最现代的布局仍然不能被旧版本的浏览器很好地支持）