在带有悬停和背景的容器中垂直和水平居中调整大小的图像
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在带有悬停和背景的容器中垂直和水平居中调整大小的图像相关的知识,希望对你有一定的参考价值。
A snippet that will centre an image within a container. The image also has a hover and background element 'on' the image.
Markup: <div class="cell-wrapper"> <div class="thumb-wrapper"> <div class="thumb selectable multi"> <img src="http://lorempixel.com/60/143"></img> </div> </div> </div> CSS: body { background: #FAFAFA; } .cell-wrapper { display: table; } /* Cell */ .thumb-wrapper { display: table-cell; text-align: center; vertical-align: middle; background: #EEEEEE; width: 139px; height: 182px; } .thumb { display: inline-block; position: relative; } img { position: relative; z-index: 1; border: 1px solid; display: block; } /*Background*/ .thumb:after { content: ''; width: 100%; height: 100%; background: #FFF; display:block; position: absolute; top: 0; left: 0; -webkit-box-shadow:2px 2px 2px 0px #898989; -moz-box-shadow:2px 2px 2px 0px #898989; box-shadow:2px 2px 2px 0px #898989; } /* Offset background for paging effect */ .thumb.multi:after { content: ''; margin-left: 2px; margin-top: 2px; } /* Hover */ .thumb.selectable:before { content: ""; opacity: 0; width: 100%; height: 100%; background: black; display:block; position: absolute; cursor: pointer; z-index: 2; } .thumb.selectable:hover:before { opacity: 0.2; }
以上是关于在带有悬停和背景的容器中垂直和水平居中调整大小的图像的主要内容,如果未能解决你的问题,请参考以下文章
调整文本大小以适应宽度(1行标签)后,如何在 UILabel 中垂直和水平居中?