引导程序跨度中的垂直对齐答案

【问题标题】：Vertical alignment in bootstrap's spans引导程序跨度中的垂直对齐
【发布时间】：2015-07-28 14:50:53
【问题描述】：

对于引导跨度中的元素或文本相对于其他跨度的垂直对齐是否有任何解决方法

例如。如果我有这样的行和跨度

<div class="row-fluid">
   <div class="span3" style="background-color:lightblue">Description</div>
   <div class="span9" style="background-color:pink">
   Lorem ipsum Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  ....
   </div>
</div>

看起来像这样

那么有没有办法在下一个跨度高度的垂直中心显示“描述”？

【问题讨论】：

如果你知道或确定了两个跨度的高度，那么你可以试试这个jsfiddle。否则，您可能会查看表格或类似表格的显示器。
Vertically Center in Twitter Bootstrap的可能重复

标签： twitter-bootstrap

【解决方案1】：

尝试display: table; 用于父母，display: table-cell; 用于孩子

JSFiddle

【讨论】：

【解决方案2】：

如果您尝试为某些屏幕尺寸垂直居中元素，您始终可以使用媒体查询，例如：

/*tablet*/
@media (min-width: 768px) and (max-width: 979px) {
  #logo{
    margin-top:70px;
  }
}
/*desktop*/
@media (max-width: 979px) {
  #logo{
    margin-top:20px;
  }
}
/*large desktop*/
@media (min-width: 1200px) {
  #logo{
    margin-top:0;
  }
}

【讨论】：

【解决方案3】：

你可以试试absolute centering tricks with CSS。例如，如果您愿意：1) 将 div 的高度声明为居中，2) 将您的 .row-fluid position: relative; 设为 this sample could work for you。

产生以下 DOM：

<div class="row-fluid relative">
    <div class="span3">
        <div class="vercenter" style="background-color:lightblue">Description</div>
    </div>
    <div class="span9" style="background-color:pink">Lorem Ipsum...</div>
</div>

还有 CSS：

.relative {
    position: relative;
}
.vercenter {
    height: 1.5em;
    margin: auto;
    left: 0;
    top: 0;
    bottom: 0;
    position: absolute;
}

【讨论】：

【解决方案4】：

我在这方面做了很多工作，这里展示了一个使用jquery 的简单解决方案！

<script>
$(document).ready(function(){
    var relheight=$('.span9').height() / 2;
    $('.span3').css('margin-top', relheight) ;

});
</script>

它有效，我也对其进行了测试。如果你喜欢我的回答，请投票给我

【讨论】：

您应该将 relheight 计算为 var relheight=($('.span9').height() - $('.span3').height()) / 2; 以垂直居中 .span3 的内容

【解决方案5】：

在 Bootstrap 中没有针对此类问题的规定。 它依赖于植入。但是，您可以编写一个 css 规则，说明如果下一个 div 超过了前一个 div 的高度，则将前一个 div 对齐到下一个 div 的中心高度，并将此类应用于您想要这种行为的任何 div。

【讨论】：

【解决方案6】：

查看此无脚本解决方案。

<div class="row-fluid">
   <div class="span3" style="background-color:lightblue;margin:0px auto;float:none;">Description</div>
   <div class="span9" style="background-color:pink;clear:both;margin:0px auto;float:none;">
   Lorem ipsum Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  ....
   </div>
</div>

实际代码：jsFiddle

只需删除内联样式并将其放入您的 css 文件中。

【讨论】：

【解决方案7】：

$('.row').each(function() {
  var rowHeight = $(this).height();
  $(this).find("[class^='span']").each(function() {
    if ( $(this).height() < rowHeight-20) {
      var odstep = (rowHeight - $(this).height()) / 2 ; 
      $(this).css( "padding-top", odstep );
    }
  });
});

【讨论】：