centering <p> without setting width

I have a error message to be displayed i can center it using text-align center if there was no background. but now its clearly visible that it occupies the whole width of the container it being a <p>.

so i gave width and margin:0 auto; but i cant give its class to every other error message because width changes. so is there any way to center it without giving width.

here is what i currently have 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;
}

solution

Change the display of the p element to inline-block and then add text-align:center to the parent element to center it.

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;
}

Alternatively, you could change the display of the p element to table as King King points out.

It’s worth noting that this approach wouldn’t work in IE7 though.