title: Vertically align a button to middle without fixing height to present both for mobile and desktop view
body: <p>I'm using bootstrap snipplet from bootsnipp on <a href="http://bootsnipp.com/snippets/featured/blog-posts-with-picture" rel="nofollow noreferrer">http://bootsnipp.com/snippets/featured/blog-posts-with-picture</a> to create list with rows. 
  What I'm tring is to vertical align the red button to middle. I could not find any way to align it fluidly(when the height is 100%) so I've fixed the height to 10em. This time it works work desktop view but for mobile view it creates a gap on the upside and downside of the red button.
  Could you help me to align it vertically middle for desktop and mobile view without creating gaps for the mobile view?</p>
  
  <p><img src="https://i.stack.imgur.com/15jlc.png" alt="Mobile View">
  <img src="https://i.stack.imgur.com/E0jhK.png" alt="Desktop View">
  Here is my html code in HAML. I don't use any specific css, just the bootstrap.</p>
  
  <pre><code>.row
    .span8
      .row
        .span8
          %h4
            %strong
              %a{:href =&gt; "#"} {{officialname}}
      .row
        .span2
          %a.thumbnail{:href =&gt; "#"}
            %img{:src =&gt; "{{provider_image}}",id: "provideredit" , alt: ""}
            /%img{alt: "", src: "{{provider_image}}", height: "135", width: "135"}/
        .span6
          .tabbable
          %ul.nav.nav-tabs{:style =&gt; "margin-bottom: 10px"}
            %li.active
              %a{"data-toggle" =&gt; "tab", :href =&gt; "#pane1_{{id}}"} Hakkında
            %li
              %a{"data-toggle" =&gt; "tab", :href =&gt; "#pane2_{{id}}"} Referansları
            %li
              %a{"data-toggle" =&gt; "tab", :href =&gt; "#pane3_{{id}}"} Sertifikaları
            %li
              %a{"data-toggle" =&gt; "tab", :href =&gt; "#pane4_{{id}}"} Fotoğrafları
          .tab-content{:style =&gt; "margin-bottom: 10px"}
            #pane1.tab-pane.active{:id =&gt; "{{id}}"}
              {{business_description}}
            #pane2.tab-pane{:id =&gt; "{{id}}"} 
              {{#each references}}
              %ul.unstyled.comments.list-hover.list-striped
                %li
                  .avatar1.pull-left
                    /%img{:alt =&gt; "Avatar", :height =&gt; "23", :src =&gt; "#", :width =&gt; "23"}/                                   
                  .body
                    .name
                      %a.text-contrast{:href =&gt; "#"}  {{referencer}} | {{category}}                     
                      %a1.btn1.btn1-link.ok.has-tooltip.pull-right 
                        Makul Fiyat
                        {{#ifCond pricerating "1"}}
                        %i.icon-thumbs-up
                        {{else}}
                        %i.icon-thumbs-down
                        {{/ifCond}}                      
                      %a1.btn1.btn1-link.remove.has-tooltip.pull-right 
                        Hizmet Kalitesi
                        {{#ifCond servicerating "1"}}
                        %i.icon-thumbs-up
                        {{else}}
                        %i.icon-thumbs-down
                        {{/ifCond}}      
                    %p
                    .text {{body}}
                  .text-right
                    %small.date.muted
                      %i.icon-time
                      %span.timeago.fade.has-tooltip.in{"data-original-title" =&gt; "August 28, 2013 - 11:08", "data-placement" =&gt; "top", :title =&gt; ""} 17 days ago                    
              {{/each}} 
            #pane3.tab-pane{:id =&gt; "{{_id}}"}
              .qualification-gallery
                %a{ href: "{{certificate_image1.url}}"}
                  %img{alt: "", src: "{{certificate_image1.thumb.url}}", height: "135", width: "135"}/
                %a{ href: "{{certificate_image2.url}}"}
                  %img{alt: "", src: "{{certificate_image2.thumb.url}}", height: "135", width: "135"}/
                %a{ href: "{{licence_image1.url}}"}
                  %img{alt: "", src: "{{licence_image1.thumb.url}}", height: "135", width: "135"}/
                %a{ href: "{{licence_image2.url}}"}
                  %img{alt: "", src: "{{licence_image2.thumb.url}}", height: "135", width: "135"}/
            #pane4.tab-pane{:id =&gt; "{{_id}}"}
              .image-gallery
                %a{ href: "{{provider_image.url}}"}
                  %img{alt: "", src: "{{provider_image.thumb.url}}", height: "135", width: "135"}/
                %a{ href: "{{provider_image1.url}}"}
                  %img{alt: "", src: "{{provider_image1.thumb.url}}", height: "135", width: "135"}/
                %a{ href: "{{provider_image2.url}}"}
                  %img{alt: "", src: "{{provider_image2.thumb.url}}", height: "135", width: "135"}/
                %a{ href: "{{provider_image3.url}}"}
                  %img{alt: "", src: "{{provider_image3.thumb.url}}", height: "135", width: "135"}/      
      .row
        .span8
          %p
          %p
            %i.icon-certificate
            %a{:href =&gt; "#"} {{workdonecount}} Hizmet Vermiş
            |
            %i.icon-credit
            %a{:href =&gt; "#"} {{pricescore}} Fiyat Puanı
            |
            %i.icon-thumbs-up
            %a{:href =&gt; "#"} {{servicescore}} Hizmet Puanı
            |
            %i.icon-map-marker
            %input{:id=&gt;"lat1_{{id}}", type: "hidden",value: "{{lat}}" }/
            %input{:id=&gt;"lat2_{{id}}", type: "hidden",value: "{{itinerarylat}}" }/
            %input{:id=&gt;"lon1_{{id}}", type: "hidden",value: "{{lng}}" }/
            %input{:id=&gt;"lon2_{{id}}", type: "hidden",value: "{{itinerarylon}}" }/
            %output{:id=&gt;"result-distance_{{id}}"}        
            |
            %i.icon-share
            %a{:href =&gt; "#"} 3 Arkadaşın Hizmet Almış
            |
            %i.icon-check
            %a{:href =&gt; "#"} Hizmetkutusu Onaylı
    .span3
      .row{style: "height: 10em; display: table-cell; vertical-align:middle;"}
        %input.style3{:id=&gt;"givequote", :type =&gt; "checkbox" , data: { id: "{{id}}" } }/
        %input#provider_id{:name =&gt; "provider_id", :type =&gt; "hidden", :value =&gt;  "{{id}}" }/
  
  %hr/
  :javascript
  
    $(document).ready(function() { 
      var p1 = new LatLon(Geo.parseDMS($('#lat1_{{id}}').val()), Geo.parseDMS($('#lon1_{{id}}').val()));
      var p2 = new LatLon(Geo.parseDMS($('#lat2_{{id}}').val()), Geo.parseDMS($('#lon2_{{id}}').val()));
      $('#result-distance_{{id}}').html(p1.distanceTo(p2)+' km');
  
      $('input[type="checkbox"].style3').checkbox({
        buttonStyle: 'btn-danger',
          buttonStyleChecked: 'btn-success',
        checkedClass: 'icon-check' ,
          uncheckedClass: 'icon-check-empty'
      }); 
    });
  </code></pre>