2

我正在尝试在 twitter bootstrap 使用的 css 中垂直对齐图像。我在该行中有一个流畅的行和 4 个跨度类span3。我使用了表格和表格单元格的技巧，但它对我不起作用。

这是示例代码。

<div class="row-fluid">
        <div class="span3">
                 <img src="http://bumblesea.com/blog/indie-fashion-design/lou-o-bedlam-flickr-fashion-photographer-300x300.jpg" alt="">
        </div>
        <div class="span3">
                 <img src="http://24.media.tumblr.com/tumblr_ku9h6qcBRn1qat5v7o1_500.jpg" alt="">
        </div>
        <div class="span3">
                 <img src="http://1.bp.blogspot.com/_KWR_gvxCigs/Ss0lQXRQj7I/AAAAAAAADkg/drrHCuZd8mA/s400/fashion1965-6.jpg" alt="">
        </div>
        <div class="span3">
                 <img src="http://www.urbalicious.com/wp-content/uploads/2009/09/givenchy_jakandjil.png" alt="">
        </div>

    </div>

我修改的CSS是 

.row-fluid {
display: table-cell;
}
.span3 {
  text-align: center;
display: table-cell;
vertical-align: middle;
float: none;
}

但是，如果我使用一个span12类并将 4 个 div 放入 span12 中，它会起作用，display:table-cell但它会破坏响应性，因此无法承受。

我猜这里在 Bootstrap 中垂直居中两个 <div class="span6">是类似的问题，但建议对我不起作用。

4

1 回答 1

2

你需要使用 !important 来覆盖引导规则，或者使用更重的选择器：http: //jsfiddle.net/HGy7a/ 

.row-fluid {
    display: table!important;
    float:none!important;
}
.span3 {
    float: none!important;
    display: table-cell!important;
    vertical-align:middle;  
}
于 2013-06-07T19:43:18.530 回答