Normally when aligning objects inside containers I use the HTML attribute "align" like this:

    <td align="right" class="container">
        <table class="object"><!-- ... --></table>
    </td>

Now I would like to change the alignment for smaller screens. What I tried, but could not make it work, is the following:

    <style>
    @media (max-width: 600px) {

        /* Leads to left-alignment no matter the specified value */
        @[class~=container] {
            text-align: center !important;
        }

        /* Works, but I am afraid Outlook will break */
        @[class~=object] {
            margin: 0 auto !important;
        }
    }
    </style>

What other options are there? Is there some best-practice for this case?