分类 HTML&CSS 下的文章

元素垂直居中设置技巧


一、场景

在页面中,经常会遇到图片水平方向和垂直方向都需要居中的效果。只是通过简单的margin方式进行调整是不够的,因为对于图片大小不一致的情况下,这个方式就是有问题的。

二、垂直居中设置技巧

原理: 元素A需要设置居中,添加B元素作为A元素居中的基线参考(inline-block支持text-align和vertical-align属性)

下图中,是说到原理。span元素高度和外层盒子高度保持一致,而img元素则参考span,添加垂直居中属性,会使得图片可以居中显示。

Snip20190521_85.png


web项目中满屏设置技巧


一、场景

在页面中,经常会遇到满屏设置的问题。最常见的设置是width: 100%; height: 100%,但特殊场景下这个方式是达不到预期效果的。
在这中,商品详情.goods-detail-view,而父元素是.home-view,可以看到父元素的大小是375x2527.5的。在这里商品详情页单纯的使用常规的宽高百分之百的方式肯定是实现不了的。【备注: 这里要实现的效果即是点击商品后跳转到商品详情页】
Snip20190520_69.png