使用Bootstrap的网格,有没有一种方法可以垂直对齐而不创建新行?

时间:2012-07-06 14:08:12

标签: css grid twitter-bootstrap vertical-alignment

假设我有以下HTML(好吧,haml,但是......):

.container
  .row
    .span4
      %h1
      %p
      %img
    .span4
      %h1
      %p
      %img
    .span4
      %h1
      %p
      %img

因此,每列都有一个标题,一些文本和一个图像。有没有办法让图像垂直对齐,就像这样做:

.container
  .row
    .span4
      %h1
      %p
    .span4
      %h1
      %p
    .span4
      %h1
      %p
  .row
    .span4
      %img
    .span4
      %img
    .span4
      %img

但没有创建新行?原因是,我希望将图像与标题和文本分组,这样在移动/平板电脑布局上,图像的布局与它们匹配的内容相同,而在第二种情况下,您将得到三个文本组,然后是三个图像。

1 个答案:

答案 0 :(得分:5)

我可以想到两种方法:

在任何情况下,在某些情况下可能不需要img-outer

<div class="container">
    <div class="row">
        <div class="span4">
            <h1></h1>
            <p></p>
            <div class="img-outer"><img src="" /></div>
        </div>
        <!-- ... -->
    </div>
</div>

高度控制

如果为上面的文本元素 h1p设置固定高度,那么您的图片将会对齐。

您还可以.span 设置固定高度并使用绝对定位。这个如下所示:

.container .row [class*="span"] {
    height: 100px;
    padding-bottom: 150px;
    position: relative;
}
.container .row [class*="span"] .img-outer{
    height: 150px;
    line-height: 150px;
    vertical-align: middle;
    position: absolute;
    bottom: 0;

    /* Take the whole width */
    left: 0;
    right: 0;
}

Demo (jsfiddle)

其他定位

似乎工作,我没有足够的绝对定位知识来保证结果是跨浏览器。

.container .row {
    padding-bottom: 150px;
    position: relative;
}
.container .row [class*="span"] .img-outer{
    height: 150px;
    line-height: 150px;
    vertical-align: middle;
    position: absolute;
    bottom: 0;

    /* Take the whole width */
    width: 300px; /* .span4 width */
}

Demo (jsfiddle)