在不固定高度的情况下将按钮垂直对齐到中间，以显示移动视图和桌面视图

我正在从http://bootsnipp.com/snippets/featured/blog-posts-with-picture上的bootsnipp使用bootstrap片段来创建带有行的列表。我正在尝试的是将红色按钮垂直对齐到中间。我找不到任何流畅地对齐它的方法（当高度为100％时），因此我将高度固定为10em。这次，它可以在桌面视图下工作，但对于移动视图，它在红色按钮的上方和下方都留有空隙。您能否帮助我在桌面视图和移动设备视图的中间垂直对齐，而又不会在移动设备视图中留出空隙？

这是我在HAML中的html代码。我不使用任何特定的CSS，仅使用引导程序。

.row
  .span8
    .row
      .span8
        %h4
          %strong
            %a{:href => "#"} {{officialname}}
    .row
      .span2
        %a.thumbnail{:href => "#"}
          %img{:src => "{{provider_image}}",id: "provideredit" , alt: ""}
          /%img{alt: "", src: "{{provider_image}}", height: "135", width: "135"}/
      .span6
        .tabbable
        %ul.nav.nav-tabs{:style => "margin-bottom: 10px"}
          %li.active
            %a{"data-toggle" => "tab", :href => "#pane1_{{id}}"} Hakkında
          %li
            %a{"data-toggle" => "tab", :href => "#pane2_{{id}}"} Referansları
          %li
            %a{"data-toggle" => "tab", :href => "#pane3_{{id}}"} Sertifikaları
          %li
            %a{"data-toggle" => "tab", :href => "#pane4_{{id}}"} Fotoğrafları
        .tab-content{:style => "margin-bottom: 10px"}
          #pane1.tab-pane.active{:id => "{{id}}"}
            {{business_description}}
          #pane2.tab-pane{:id => "{{id}}"} 
            {{#each references}}
            %ul.unstyled.comments.list-hover.list-striped
              %li
                .avatar1.pull-left
                  /%img{:alt => "Avatar", :height => "23", :src => "#", :width => "23"}/                                   
                .body
                  .name
                    %a.text-contrast{:href => "#"}  {{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" => "August 28, 2013 - 11:08", "data-placement" => "top", :title => ""} 17 days ago                    
            {{/each}} 
          #pane3.tab-pane{:id => "{{_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 => "{{_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 => "#"} {{workdonecount}} Hizmet Vermiş
          |
          %i.icon-credit
          %a{:href => "#"} {{pricescore}} Fiyat Puanı
          |
          %i.icon-thumbs-up
          %a{:href => "#"} {{servicescore}} Hizmet Puanı
          |
          %i.icon-map-marker
          %input{:id=>"lat1_{{id}}", type: "hidden",value: "{{lat}}" }/
          %input{:id=>"lat2_{{id}}", type: "hidden",value: "{{itinerarylat}}" }/
          %input{:id=>"lon1_{{id}}", type: "hidden",value: "{{lng}}" }/
          %input{:id=>"lon2_{{id}}", type: "hidden",value: "{{itinerarylon}}" }/
          %output{:id=>"result-distance_{{id}}"}        
          |
          %i.icon-share
          %a{:href => "#"} 3 Arkadaşın Hizmet Almış
          |
          %i.icon-check
          %a{:href => "#"} Hizmetkutusu Onaylı
  .span3
    .row{style: "height: 10em; display: table-cell; vertical-align:middle;"}
      %input.style3{:id=>"givequote", :type => "checkbox" , data: { id: "{{id}}" } }/
      %input#provider_id{:name => "provider_id", :type => "hidden", :value =>  "{{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'
    }); 
  });