9

我正在尝试扩展默认的 Bootstrap 图像轮播以支持动态大小的图像（最大 500x400），水平和垂直居中。此外，我想保持原始的标题布局，它将标题锚定到图像的底部，标题 div 完全延伸到图像上（但没有更多。）

我整理了一个小提琴，这是默认 Bootstrap 设置的一个相当干净的实现（在 css 部分的末尾只有 4 个额外的样式）：

http://jsfiddle.net/rdugan/JFBFU/26/

通过在图像和标题周围添加一个环绕的“内联”div，并在父级上使用“文本对齐：中心”，我可以相当轻松地完成水平居中和标题要求。但是，垂直居中仍然是一个问题（一如既往。）

作为替代方案，我还尝试在不同的 div 上使用 'display: table-cell' （以及随附的居中样式），结果各不相同 - 在某些情况下，我搞砸了轮播功能，而在其他情况下，我完成了图像居中，但失去了标题锚定。

任何提示将不胜感激 - 很长一段时间以来一直在努力解决这个问题。

4

3 回答 3

17

您可以使用以下规则水平居中：

.carousel-inner { 文本对齐：居中；}

.carousel .item > img { display: inline-block; }

对于垂直对齐，你应该看看这个： http: //www.student.oulu.fi/~lauriirai/www/css/middle/

并且为了在调整大小时保持图像纵横比，您只需要更改图像的宽度或高度，而不是一次更改两者，它将按照原始比例调整大小。

于 2012-04-21T10:57:24.733 回答
5

直接在包含轮播项目的 div 上使用 CSS 背景属性：

在 *.html 中：

<div class="item" style="background-image: url('[path-to-image].png')">
    <!-- omit the <img> tag -->
    <!-- the rest of the stuff that was in the <div> goes here -->
</div>

在 *.css 中：

.carousel .item {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

但是，这似乎打破了轮播导航箭头。

于 2012-12-31T08:54:30.007 回答
0

尝试使用这个片段

.carousel-inner > .item > img {
    min-width: 100%;
}
于 2016-03-02T15:50:31.553 回答