Question

我在http://bootsnipp.com/snippets/featured/blog-posts-with-picture上使用bootnipp的bootstrap snipplet来创建包含行的列表。我要做的是将红色按钮垂直对齐到中间。我找不到任何方法来流畅地对齐它（当高度为100％时）所以我已经将高度固定为10em。这次它可以工作桌面视图，但对于移动视图，它会在红色按钮的上部和下部产生间隙。您是否可以帮我在桌面和移动视图的垂直中间对齐，而不会为移动视图创建间隙？

Mobile View Desktop View 这是我在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'
    }); 
  });

Answer 1

我认为最好的解决方案是使用媒体查询来定位移动浏览器的大小，使其高度等于按钮高度。例如：

@media (max-width: 480px) {
  .teklif {
    height: 40px;
  }
}

Answer 2

谢谢你。关于你的回答我已经用这个css对它进行了整理。

Haml的：

 .span3
    .row{id: "xx2"}
      %input.style3{:id=>"givequote", :type => "checkbox" , data: { id: "{{id}}" } }/
      %input#provider_id{:name => "provider_id", :type => "hidden", :value =>  "{{id}}" }/

:css
  /* Smartphones (portrait and landscape) ----------- */
  @media only screen 
  and (min-device-width : 320px) 
  and (max-device-width : 480px) {
    #xx2 {
      display: table-cell;  
      vertical-align: middle;  
      height: 40px; important !
    }
  }

  /* Smartphones (landscape) ----------- */
  @media only screen 
  and (min-width : 321px) {
    #xx2 {
      display: table-cell;  
      vertical-align: middle;  
      height: 40px; important !
    }
  }

  /* Smartphones (portrait) ----------- */
  @media only screen 
  and (max-width : 320px) {
    #xx2 {
      display: table-cell;  
      vertical-align: middle;  
      height: 40px; important !
    }
  }

  /* iPads (portrait and landscape) ----------- */
  @media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) {
    /* Styles */
  }

  /* iPads (landscape) ----------- */
  @media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  and (orientation : landscape) {
    #xx2 {
      display: table-cell;  
      vertical-align: middle;  
      height: 200px; important !
    }
  }

  /* iPads (portrait) ----------- */
  @media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  and (orientation : portrait) {
    #xx2 {
      display: table-cell;  
      vertical-align: middle;  
      height: 200px; important !
    }
  }

  /* Desktops and laptops ----------- */
  @media only screen 
  and (min-width : 1224px) {
    #xx2 {
      display: table-cell;  
      vertical-align: middle;  
      height: 200px; important !
    }
  }

  /* Large screens ----------- */
  @media only screen 
  and (min-width : 1824px) {
    #xx2 {
      display: table-cell;  
      vertical-align: middle;  
      height: 200px; important !
    }
  }

  /* iPhone 4 ----------- */
  @media
  only screen and (-webkit-min-device-pixel-ratio : 1.5),
  only screen and (min-device-pixel-ratio : 1.5) {
    #xx2 {
      display: table-cell;  
      vertical-align: middle;  
      height: 200px; important !
    }
  }

  /* iPhone 5 -------To-DO---- */
  @media
  only screen and (-webkit-min-device-pixel-ratio : 1.7),
  only screen and (min-device-pixel-ratio : 1.7) {
    #xx2 {
      display: table-cell;  
      vertical-align: middle;  
      height: 200px; important !
    }
  }

将按钮垂直对齐而不固定高度，以呈现移动和桌面视图

2 个答案: