html - 使用 bootstrap 使图像在轨道上居中

Question

我试图通过设置一个类然后在样式表/scss 中进行编辑来使这两张图像居中并放大，但​​我没有运气。这是 html 代码:

<div class="row" class="testimoinal_image">
    <div class="col-md-5">
        <%= link_to image_tag("south_london.jpg", class:"south_london")%>
    </div>
    <div class="col-md-2">
    </div>
    <div class="col-md-5">
        <%= link_to image_tag("statravellogo.jpg", class:"statravellogo"), "https://http://www.statravel.co.uk/", :target => "_blank"%>
    </div>
</div>

这就是我在样式表中尝试做的事情 - .south_london 类似乎让我更改大小但不能更改位置，.statravellogo 类不会响应任何更改:

.testimonial_image{
max-width: 15rem;
text-align: center;
}

.south_london{
    max-width: 20rem;
    float: center;
}

.statravellogo{
    max-width: 15rem;
    text-align: center;
}

很想听听任何想法

Answer 1

正如 Michael Coker 所说，属性 float: center;无效

当你使用 bootstrap 时，你可以使用 bootstrap 网格的偏移量将你的两个图像放在页面的中心

此 HTML5 代码:

<div class="row" class="testimoinal_image">
    <div class="col-md-offset-4"></div>
    <div class="col-md-offset-4">
       <%= link_to image_tag("south_london.jpg", class:"south_london")%> -->
       <%= link_to image_tag("statravellogo.jpg", class:"statravellogo"), "https://http://www.statravel.co.uk/", :target => "_blank"%>
    </div>
    <div class="col-md-offset-4"></div>
</div>

和代码 CSS :

.testimonial_image{
    text-align: center;
    }

    .south_london{
        max-width: 20rem;
    }

    .statravellogo{
        max-width: 15rem;
        text-align: center;
    }