Question

我有一条错误信息要显示如果没有背景，我可以使用文本对齐中心来居中。但现在它清晰可见，它占据了容器的整个宽度<p>。

所以我给了宽度和保证金：0自动; 但我无法将其类赋予其他所有错误消息，因为宽度会发生变化。所以有没有办法让它居中而不给予宽度。

这是我目前拥有的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;
}

Answer 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。

Answer 2

您可以display:table使用p：

.error {
  ...
  display:table;
}

Demo.

居中<p>而不设置宽度</p>

2 个答案: