The use of webkit CSS properties is not recommended due the non-standarized. Refactoring some code I've found I'm using a text-align: -webkit-center
in my CSS:
.wrap-block {
text-align: -webkit-center;
}
in order to center some blocks of text:
p {
max-width: 200px;
text-align: justify;
}
in a structure similar to this one:
<div class="main-block">
<div class="wrap-block">
<p>Some random text</p>
<img ... />
<p>...</p>
<blockquote>Unlimited width for this</blockquote>
<p>...</p>
</div>
</div>
This fiddle shows an example.
How to get rid of this webkit property? How to replace using standard HTML or CSS?
From the MDN documentation:
The standard-compatible way to center a block itself without centering its inline content is setting the left and right margin to auto, e.g.:
margin:auto;
ormargin:0 auto;
ormargin-left:auto; margin-right:auto;
So:
.wrap-block {
text-align: center;
}
.wrap-block p,
.wrap-block blockquote {
margin-left: auto;
margin-right: auto;
}