文章关键字 ‘垂直居中’

改变CSS世界纵横规则的writing-mode属性

2016年04月27日,星期三


writing-mode这个CSS属性,我们是不是很少见到,很少用到!我们往往称不常见的东西为“生僻”,就像是不常见的文字我们叫“生僻字”,因此不常见的CSS属性,我们可以叫做“生僻属性”,writing-mode给我们的感觉就是一个“生僻属性”,很弱,可有可无。

但是,实际上,我们都错了,大错特错,writing-mode很弱?卧槽,别开玩笑了,writing-mode可以说是CSS世界里面最逆天的CSS属性了,直接颠覆CSS世界的众多规则……

本月为4月压轴作品,大量demo,大量脑洞大开的创意处理,希望可以对您的学习有所帮助。

阅读全文…

小tip: IE下zoom或Matrix矩阵滤镜中心点变换实现

2015年02月15日,星期日

IE的Matrix矩阵变换,或者zoom缩放会改变元素原本占据的展示尺寸,位置等,与CSS3优雅的transform完全不一样,导致,我们需要对IE做额外的偏移。

但是,我们大多数人的数学都是体育老师交的,计算偏移值什么的,想想就大头娘娘了,难道,就不能跟CSS3 transform一样,就规规矩矩居中放大吗?

童鞋,略施小计,还是有办法滴……

阅读全文…

小tip: margin:auto实现绝对定位元素的水平垂直居中

2013年11月19日,星期二

如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了,或借助margin负值,或借助CSS3 transformtranslate属性;这里介绍另外一个方法,margin:auto方法……

外甥点灯笼——照旧(舅),有demo有截图有源代码展示。希望本文的内容能够对您的学习有所帮助。

阅读全文…

视区相关单位vw, vh..简介以及可实际应用场景

2012年09月24日,星期一

视区相关单位vw, vh
CSS3中一些新的单位早在去年春暖花开的时候就介绍了,参见:CSS长度值及时间、频率、角度单位。显然,其中就提到了本文要感叹的单位vw, vh.
不过“我看见你”和“我触碰你”是不一样的。正好,机缘巧合,最近又与这两个单位想见。大致琢磨了下,貌似vh这个单位可以实现我以前曾希望实现的的整体高度自适应布局。想到这里,自己不由得小兴奋了下,于是决定抽时间研究研究(虽然最近整iPad忙得屁股尿流~~)

阅读全文…

absolute元素在text-align属性下的对齐显示

2011年12月27日,星期二

本文简单研究了下CSS中 text-align属性与position属性之间的关系。通过一些实例论述一些观点,并引申出一些实际的应用。截图很详尽,还有必要的demo以及源代码展示。其他就不多说了,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

css行高line-height的一些深入理解及应用

2009年11月28日,星期六


前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”,是个不错的文章,学到了不少东西,颇有感觉,于是决定结合自己的一些经验与理解写篇内容互补或者说是角度不同的文章吧。
本文核心重点在于inline box模型下的line-height高度问题,希望可以纠正css中对高度的正确认识,并依次展开列举了一些常见的有关line-height的应用,提供demo页面,希望对您的学习有所帮助。

阅读全文…

大小不固定的图片、多行文字的水平垂直居中

2009年08月28日,星期五

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示。
关于图片垂直居中显示,想必很多写css的人都研究过,或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法,用font-size解决IE下垂直居中的问题,是个好方法吗?是的,方法是不错,可是问题也很多:不支持img外标签的浮动,致使多图片排列时需添加额外标签;需要记住一些比例参数,上手较难;原理艰深,兼容性不稳定等。但是在我看来,这个方法不足够好!本文将提供两种更为新颖的方法,代码简洁,原理简单,上手容易,兼容性强,出错率低的方法。
css是如此的精深,我相信后来人会有更加绝妙的方法。但是,本文提供的几种实现图片垂直居中方法,一定是目前最实用的几种方法。一起来一睹为快吧!

阅读全文…