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

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

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

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

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