title: Center Div on-top and in between two divs in Foundation Zurb
body: <p>I just started using Foundation and I like it a lot. I have a question.  I have a design that requires the logo to be horizontally centered, on-top and in between two full divs (see attached picture).</p>
  
  <p>The code below is what I have which seems to work fine but doesn't re-size on screen changes and I was wondering if there was a better way to accomplish this when working with Foundation.</p>
  
  <p>Is there a possible improvement that I could do to better integrate the logo into Foundation?  In other words is there a way to integrate the logo in a way that It re-sizes when the screen changes or this is my best option and I would need to re-size it manually for multiple screens?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="row fullWidth"&gt;
       &lt;div class="large-12 columns box"&gt; 
  
                &lt;img src="logo.png" class="logo"&gt;
  
        &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row fullWidth"&gt;
       &lt;div class="large-12 columns box"&gt; &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.fullWidth {
     width: 100%;
     margin-left: auto;
     margin-right: auto;
     max-width: initial;
     position: relative;
  }
  
  .logo{
      position:absolute;
      left: 50%;
      top: 20px;
      margin-left: -100px;// half-width of logo
      z-index: 20;
  }
  
  
  .box{
      background-color: #333;
      height: 120px;
      margin-bottom: 10px; 
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/q8StZ.png" alt="enter image description here"></p>