title: Aligning a responsive div center
body: <p>Within the structure below what is the best way to be able to align the <code>div#logo</code> into the middle of the <code>grid_12 visible</code> div for only non mobile devices.  </p>
  
  <p>Can I create a custom piece of code to override the above classes?  </p>
  
  <p>I have created a Plunker with my code - <a href="http://plnkr.co/edit/lrRm0nXdYaz5g7dYe4DS" rel="nofollow">http://plnkr.co/edit/lrRm0nXdYaz5g7dYe4DS</a></p>
  
  <p><strong>HTML:</strong> </p>
  
  <pre><code>&lt;header class="row visible"&gt;
  
      &lt;div class="grid_12 visible"&gt;
          &lt;div class="row logo-wrap"&gt;
  
              &lt;!-- logo --&gt;
                          &lt;div class="grid_6"&gt;
                  &lt;div id="logo"&gt;
                      &lt;a href="http://dev.jzm.co.nz/mytime/"&gt;&lt;img src="http://dev.jzm.co.nz/mytime/image/data/logo-black-web.png" title="My Time Candles" alt="My Time Candles" /&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- search --&gt;
              &lt;div class="grid_6 visible"&gt;
                  &lt;div id="search"&gt;
                      &lt;div class="button-search"&gt;Search&lt;/div&gt;
                                          &lt;input type="text" name="filter_name" value="Search ... " onclick="this.value = '';" onkeydown="this.style.color = '#000000';" /&gt;
                                      &lt;/div&gt;&lt;!--/search--&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;&lt;!--/row--&gt;  
      &lt;/div&gt;&lt;!--/grid_12--&gt;
  &lt;/header&gt;&lt;!--End Header--&gt;
  </code></pre>