Search code examples
htmlcsswebkit

How to replace a text-align: -webkit-center?


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?


Solution

  • 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; or margin:0 auto; or margin-left:auto; margin-right:auto;

    So:

    .wrap-block {
        text-align: center;
    }
    
    .wrap-block p,
    .wrap-block blockquote {
        margin-left: auto;
        margin-right: auto;
    }