title: CSS Relative Positioning and Vertical Alignment with Bootstrap
body: <p>I'm trying to convert a image mockup into HTML/CSS and I'm struggling to get things positioning correctly - in particular with vertical alignment, and with getting things to stay in relative position as you resize the window.</p>
  
  <p>JSFiddle code:</p>
  
  <p><a href="http://jsfiddle.net/victorhooi/ZcrCc/" rel="nofollow noreferrer">http://jsfiddle.net/victorhooi/ZcrCc/</a></p>
  
  <p>Full-screen JSFiddle output:</p>
  
  <p><a href="http://jsfiddle.net/victorhooi/ZcrCc/embedded/result/" rel="nofollow noreferrer">http://jsfiddle.net/victorhooi/ZcrCc/embedded/result/</a></p>
  
  <p>I have this mockup:</p>
  
  <p><img src="https://i.stack.imgur.com/pMxpG.jpg" alt="enter image description here"></p>
  
  <p>But if you look at the JSFiddle above, I can't seem to get the opening and closing branches, along with the type images in the centre to be vertically aligned within the white box - they're everywhere.</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;section id="proposal" class="backgroundphotos"&gt;
  &lt;div class="row"&gt;
          &lt;div class="col-md-10 col-md-offset-1 panel panel-default"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-1 col-md-offset-2"&gt;
                      &lt;img src="http://www.victorandalpha.com/images/curly_brackets_open.png" /&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-2"&gt;
                      &lt;img src="http://www.victorandalpha.com/images/proposal_01.png" /&gt;
                      &lt;img src="http://www.victorandalpha.com/images/proposal_02.png" /&gt;
                      &lt;img src="http://www.victorandalpha.com/images/proposal_03.png" /&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-2"&gt;
                      &lt;img src="http://www.victorandalpha.com/images/proposal_04.png" /&gt;
                      &lt;img src="http://www.victorandalpha.com/images/proposal_05.png" /&gt;
                      &lt;img src="http://www.victorandalpha.com/images/proposal_06.png" /&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-2"&gt;
                      &lt;img src="http://www.victorandalpha.com/images/proposal_07.png" /&gt;
                      &lt;img src="http://www.victorandalpha.com/images/proposal_08.png" /&gt;
                      &lt;img src="http://www.victorandalpha.com/images/proposal_09.png" /&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-1"&gt;
                      &lt;img src="http://www.victorandalpha.com/images/curly_brackets_close.png" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>with the CSS:</p>
  
  <pre><code>    .backgroundphotos {
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          background-attachment: scroll; /* Why does this not carry over? */
          min-height: 800px;
  
      }
  
      #proposal {
          background: url(../img/04.jpg) no-repeat center center fixed;
          background-attachment: scroll;
      }
  
      #proposal &gt; div.row &gt; div &gt; div.row &gt; div {
          position: relative;
          bottom: -90px;
      }
  
      #proposal &gt; div.row {
          position: relative;
          bottom: -22.500em;
      }
  </code></pre>
  
  <p><em>NB: I've edited the original question to split it into separate ones for the other CSS positioning issues. The related questions are here:</em></p>
  
  <p><a href="https://stackoverflow.com/questions/19101932/css-positioning-two-elements-relative-to-each-other-and-keeping-during-resize">CSS Positioning two elements relative to each other, and keeping there during resize</a></p>
  
  <p><a href="https://stackoverflow.com/questions/19102042/css-positioning-for-glyphicon-based-navbar-that-opens-on-hover">CSS Positioning for Glyphicon-based Navbar that Opens on Hover</a></p>