在Bootstrap缩略图中垂直居中约束的图像 [英] Vertically center constrained image in Bootstrap thumbnail

问题描述

使用

溢出 CSS属性很好，给我的容器的滚动条 div 。

缩略图 div 元素将是一个固定的大小，这很可能会小于图像。在这种情况下，图像被约束以相应地拟合。正如你可以看到，当图像比缩略图更宽时，宽度设置为缩略图，高度也相应缩放。这是我想要的行为，但我想让图像在缩略图中垂直居中。

我试过添加 vertical -align：middle 到缩图 div 元素，但无效。

解决方案

方法1 - < a href =http://jsfiddle.net/pLTsy/> （示例） ：

包装 img 元素：

 < div class =thumbnailstyle = ：400px; height：400px> 
< div class =thumbnail_wrapper> 
< img src =http://i.minus.com/iucsUZfSM9v45.gif/> 
< / div> 
< / div> 
  

更改 .thumbnail 元素的显示到表。使用 border-collapse：separate 修复填充/间距问题。将包装器的显示更改为 table-cell ，然后添加 vertical-align：middle 。最后，给 img 元素宽度 100％。

这里的例子

  .thumbnail {
 display：table; 
 border-spacing：2px; 
 border-collapse：separate; 
 border-radius：10px; / * Demonstrational .. * / 
} 
 .thumbnail_wrapper {
 display：table-cell; 
 vertical-align：middle; 
} 
 .thumbnail_wrapper> img {
 width：100％; 
} 
  

---

方法2 - （示例） ：

flexbox方法不需要包装器元素，但是它比 table 稍微少支持。 code> / table-cell 方法。

  div class =thumbnailstyle =width：400px; height：400px> 
< img src =http://i.minus.com/iucsUZfSM9v45.gif/> 
< / div> 
  

基本上，只需更改显示 .thumbnail 元素到 flex ，然后添加 align-items：center 。添加所有其他供应商前缀以支持跨浏览器。详细了解flexbox布局和属性 此处 - （mdn）。

这里的例子

  .thumbnail {
 display：-webkit-flexbox; 
显示：-ms-flexbox; 
 display：-webkit-flex; 
 display： 
 -webkit-flex-align：center; 
 -ms-flex-align：center; 
 -webkit-align-items：center; 
 align-items：center; 
} 
  

---

您可以避免使用HTML表格 - 这里的示例 。

Using Twitter Bootstrap, I'm trying to create a horizontally scrolling series of thumbnails which allows for a scrollbar within the row that the thumbnails are displayed in, like so:

This gets me most of the way there, using this HTML:

<div class="row">Hello there</div>
<div class="row" style="overflow-x:scroll">
<table>
    <tr>
        <td>
            <div class="thumbnail" style="width: 400px; height: 400px">
                <img src="http://i.minus.com/iucsUZfSM9v45.gif"/>
            </div>
        </td>
        <td>
            <div class="thumbnail" style="width: 400px; height: 400px">
                <img src="http://i.minus.com/iucsUZfSM9v45.gif"/>
            </div>
        </td>
        <td>
            <div class="thumbnail" style="width: 400px; height: 400px">
                <img src="http://i.minus.com/iucsUZfSM9v45.gif"/>
            </div>
        </td>
    </tr>
</table>
</div>

JSFiddle: http://jsfiddle.net/54fgv/2/

The overflow CSS property works great, giving me the scrollbar for the container div.

The thumbnail div elements are going to be a fixed size, which is more than likely going to be smaller than the image. In this case, the image is constrained to fit accordingly. As you can see though, when the image is wider than the thumbnail, the width is set to the thumbnail and the height is scaled accordingly. This is the behavior that I want, but I'd like to have the image vertically centered in the thumbnail.

I've tried adding vertical-align: middle to the thumbnail div elements, but to no avail.

How can I get the image to be centered vertically within the thumbnail?

解决方案

Approach 1 - (example):

Wrap the img elements:

<div class="thumbnail" style="width: 400px; height: 400px">
    <div class="thumbnail_wrapper">
        <img src="http://i.minus.com/iucsUZfSM9v45.gif"/>
    </div>
</div>

Change the display of the .thumbnail element to table. Use border-collapse: separate to fix padding/spacing issues. Change the display of the wrapper to table-cell and then add vertical-align: middle. Finally, give the img elements a width of 100%.

Example Here

.thumbnail {
    display:table;
    border-spacing: 2px;
    border-collapse: separate;
    border-radius:10px; /* Demonstrational.. */
}
.thumbnail_wrapper {
    display:table-cell;
    vertical-align:middle;
}
.thumbnail_wrapper > img {
    width:100%;
}

---

Approach 2 - (example):

The flexbox approach doesn't require the wrapper element, however it has slightly less support than the table/table-cell approach.

<div class="thumbnail" style="width: 400px; height: 400px">
    <img src="http://i.minus.com/iucsUZfSM9v45.gif" />
</div>

Basically, just change the display of the .thumbnail element to flex and then add align-items: center. All the other vendor prefixes are added for cross browser support. Read more about flexbox layouts and properties here - (mdn).

Example Here

.thumbnail {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

---

As a side note, you can avoid having to use HTML tables - example here.

这篇关于在Bootstrap缩略图中垂直居中约束的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！