Question

我试图在使用css的twitter bootstrap中垂直对齐图像。我在该行中有一个流畅的行和4个跨度类span3。我使用过table和table-cell技巧，但它对我不起作用。

这是示例代码。

<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类并使用display:table-cell将4个div放在span12内，它会起作用，但它会破坏响应性，因此无法负担这一点。

我想这里Vertically centering two <div class="span6">'s within Bootstrap是类似的问题，但建议对我不起作用。

Answer 1

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

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

在引导跨度类中垂直对齐图像

1 个答案: