Image align left under 600 px

Question

This question has been marked as a dublicate. The other question did not solve my problem.

The logo image in the top on this page: My Site Example is align left, when I go under 600px;. I am programing for email newsletters, and therefore I am using the foundation framework with CSS and tables.

I cannot customize a lot in the CSS, because the email clients have problem rendering some custom code. I found out earlier where a user on Stackoverflow suggested an idea. I notice than when I delete the second line in the css @media, the logo is going almost to center, but is not responsive.

The foundation framework apparently left align everything, when the screensize is under 600px. But I cannot find anything on the documentation which says how to overrule that.

Does anybody have a creative idea, which dont require a lot of custom code, so I do not mess up the foundation framework?

CSS

@media only screen and (max-width: 600px) {

  table[class="body"] img {
    width: auto !important;
    height: auto !important;
  }
  <!-- Second Line -->
  table[class="body"] center {
    min-width: 0 !important;
  }

HTML (Relevant code)

<!-- Logo -->
          <table class="row background-color__white" id="component-center">
            <tr>
              <td class="center" align="center">
                <center>
                  <table align="center" class="container">
                    <tbody>
                      <tr>
                        <td>
                          <table class="row">
                            <tbody>
                              <tr>
                                <th class="small-12 large-12 columns first last">
                                  <table>
                                    <tr>
                                      <th>
                                        <center data-parsed="">
                                          <img src="http://placehold.it/200?text=center" alt="image of clever meme that made me chuckle" align="center" class="float-center">
                                        </center>
                                      </th>
                                      <th class="expander"></th>
                                    </tr>
                                  </table>
                                </th>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </center>
              </td>
            </tr>
          </table>

Answer 1

My answer is the exact same answer as last time. Except now the answer to your problem has moved to public.html:837. The parent element can influence the element below it.

In this case, you have an href wrapping the image. If you look at your css code on line 837, you'll see this, pared down to the text-align:

body, table.body, h1, h2, h3, h4, h5, h6, p, td, th, a { text-align: left; }

Above the href is a th. It is also text-align: left; If you specify this style on each line: style="text-align: center !important;", it will over-ride the text-align: left.

I am an email developer and I do this with Zurb Foundation for emails every day. I understand the problem and face it constantly, only I'm trying to push things to the right. Please give this a try.