html – 引导缩略图中的垂直中心约束图像

概述使用 Twitter Bootstrap,我试图创建一个水平滚动的系列 thumbnails,它允许在行中显示缩略图的滚动条,如下所示： 这得到我最大的方式,使用这个HTML： <div class="row">Hello there</div><div class="row" style="overflow-x:scroll"><table> <tr> <td> 使用 Twitter Bootstrap,我试图创建一个水平滚动的系列 thumbnails,它允许在行中显示缩略图的滚动条,如下所示：

这得到我最大的方式,使用这个HTML：

<div >Hello there</div><div  ><table>    <tr>        <td>            <div  >                <img src="http://i.minus.com/iucsUZfSM9v45.gif"/>            </div>        </td>        <td>            <div  >                <img src="http://i.minus.com/iucsUZfSM9v45.gif"/>            </div>        </td>        <td>            <div  >                <img src="http://i.minus.com/iucsUZfSM9v45.gif"/>            </div>        </td>    </tr></table></div>

Jsfiddle：http://jsfiddle.net/54fgv/2/

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

缩略图div元素将是一个固定的大小,这可能会比图像更小.在这种情况下,图像被约束以相应地适应.您可以看到,当图像比缩略图宽时,宽度设置为缩略图,并相应地缩放高度.这是我想要的行为,但我想让图像在缩略图中垂直居中.

我已经尝试添加vertical-align：中间到缩略图div元素,但无济于事.

如何让图像在缩略图中垂直居中？

解决方法 方法1 – (example)：

包装img元素：

<div  >    <div >        <img src="http://i.minus.com/iucsUZfSM9v45.gif"/>    </div></div>

将.thumbnail元素的显示更改为表.使用border-collapse：单独来修复填充/间距问题.将包装器的显示更改为table-cell,然后添加vertical-align：mIDdle.最后给出img元素的宽度为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%;}

方法2 – (example)：

flexBox方法不需要包装元素,但是它具有比表/表格单元方法更多的slightly less support.

<div  >    <img src="http://i.minus.com/iucsUZfSM9v45.gif" /></div>

基本上,只需将.thumbnail元素的显示更改为flex,然后添加align-items：center.添加所有其他供应商前缀以进行跨浏览器支持.阅读更多关于flexBox布局和属性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;}

作为附注,您可以避免使用HTML表 – example here.

总结

以上是内存溢出为你收集整理的html – 引导缩略图中的垂直中心约束图像全部内容，希望文章能够帮你解决html – 引导缩略图中的垂直中心约束图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。