title: Zurb class show-for-large-only aligns all text left
body: <p>I'm building a small site which makes use of the show-for-XXXX-only classes.</p>
  
  <p>My text is center aligned however applying the show-for-large-only class (or small/medium) aligns the text left. I cannot seem to override this.</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>        &lt;div class="content"&gt;
  
          &lt;div class="row"&gt;
  
              &lt;div&gt;
  
                  &lt;div class="large-offset-2 large-8 small-offset-2 small-8 columns"&gt;
                      &lt;div class="hero-table show-for-large-up"&gt;
                          &lt;div class="hero-copy"&gt;
                              Here is my text. It keeps aligning left!
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>.hero-table {
          display: table;
          width: 100%;
          height: 320px;
          }
  
  .hero-copy  {
              display: table-cell;
              vertical-align: middle;
              font-family: "adobe-garamond-pro",serif;
              font-size: 22px;
              -webkit-font-smoothing: antialiased;
              font-style: italic;
              font-weight: 400;
              color: #f2f2f2;
              height: 320px;
              background-color: red;
              }
  </code></pre>
  
  <p>I wonder if the table code I am using to vertically align the content is clashing with the Zurb class.</p>